Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow

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:

• Pinterest Like Glowing Input Fields with CSS3
• Pinterest-Like Dynamic & Responsive Grid Layout Plugin - BlocksIt
• Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
• Pinterest-Like Web Layout Plugin
• Pinterest Style Dynamic Layout jQuery Plugin - Masonry
• Simple Pinterest Like Grid Layout Plugin - Pinbox
• Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu

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.