JQuery Masonry waterfall stream plug-in usage details, jquerymasonry

JQuery Masonry waterfall stream plug-in usage details, jquerymasonry

Masonry is a powerful jQuery dynamic grid layout plug-in that can help developers quickly develop interface effects similar to clip art. The effect of float in CSS is not the same as that of float. float is first horizontally arranged and then vertically arranged. With Masonry, elements are vertically arranged, then place the next element in the next development area of the grid. This effect minimizes the gap between elements of different heights in the vertical direction. As follows:

As you can see in the figure, using float to process elements of different heights in the grid layout makes the interval between elements in the vertical direction relatively large. After using Masonry to process elements, the interval decreases.

Usage

First, import the class library as follows:

Copy codeThe Code is as follows:
<Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</Script> <script src = "/path/to/jquery. masonry. min. js"> </script>

Then, execute masonry for the element container as follows:

Copy codeThe Code is as follows:
$ (Function (){
$ ('# Iner'). masonry ({
// Options
ItemSelector: '. item ',
ColumnWidth: 240
});
});

Html code

Copy codeThe Code is as follows:
<Div id = "container">
<Div class = "item">... </div>
<Div class = "item">... </div>
<Div class = "item">... </div>
...
</Div>

Css

Copy codeThe Code is as follows:
. Item {
Width: 220px;
Margin: 10px;
Float: left;
}

If there are images in the loaded elements, make sure that Masonry is executed after all the images are loaded. You need to call the following code:

Copy codeThe Code is as follows:
Var $ container = $ ('# iner ');
$ Container. imagesLoaded (function (){
$ Container. masonry ({
ItemSelector: '. item ',
ColumnWidth: 240