Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow

Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow
File Size: 18 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Mosaic Flow is a super tiny and easy-to-use jQuery layout plugin that allows you to simply and quickly create responsive pinterest.com like image grid layout.

Related Plugins:

How to use it:

1. Include jQuery library and jQuery Mosaic Flow on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mosaicflow.min.js"></script>

2. Markup Html strucuture

<div class="clearfix mosaicflow">
    <div class="mosaicflow__item">
        <img width="500" height="300" src="1.jpg" alt="">
    </div>
    <div class="mosaicflow__item">
        <img width="500" height="500" src="2.jpg" alt="">
    </div>
    …
</div>

3. Call the plugin with options

$('#mycontainer').mosaicflow({

  // jQuery selector of content item.
  itemSelector: '.item',

  // CSS class of column element.
  columnClass: 'mosaicflow__column',

  // Minimum item (or column) width. 
  minItemWidth: 300,

  // Minimum number of columns.
  minColumns: 2,

  // Method of calculation items’ heights
  // auto: will calculate automatically each item’s height after being placed in a column, so it is smart enough if your items are responsive and height is being modified as width is (which will happen as columns shrink or expand).
  // attribute: will try to grab the value placed in height attribute of <img> tags when these are used as items. This is faster than auto because no calculation is done.
  itemHeightCalculation: 'auto',

  threshold: 40
  
});

4. API methods.

var container = $('#mycontainer').mosaicflow();

// add a new element
var elm = $('<div>A new added element</div>');
container.mosaicflow('add', elm);

// remove an element
container.mosaicflow('remove', elm);

5. Events.

  • mosaicflow-layout: Fire on every layout change: initialization or change number of columns after window resize.
  • mosaicflow-start / mosaicflow-ready: Fire before / after the mosaicflow init it's work.
  • mosaicflow-fill / mosaicflow-filled: Fire before / after reorganized columns.
  • mosaicflow-add / mosaicflow-added: Fire before / after adding items.
  • mosaicflow-remove / mosaicflow-removed: Fire before / after removing items.

Change Logs:

2016-07-25

  • If mosaicflow is used in an environment that also uses visibility to show/hide elements (ie a mega dropdown menu) this ensures that not all columns are removed * if mosaicflow is used in an environment that also uses visibility to show/hide elements (ie a mega dropdown menu) this ensures that not all columns are removed.

2016-06-15

  • Add mosaicflow- prefix to event names

2016-06-13

  • Implement minColumns setting

v0.2.5 (2013-12-13)

  • Fixed error with updating lowest column while adding new items.

v0.2.3 (2013-10-18)

  • added recomputeHeights method
  • added Events
  • Bug fixes

v0.2.2 (2013-07-01)

  • bug fixes
  • adds empty method

v0.2.0 (2013-06-05)

  • Accepts arbitrary HTML, add/remove methods

This awesome jQuery plugin is developed by sapegin. For more Advanced Usages, please check the demo page or visit the official website.