JQuery Masonry Waterfall Streaming plugin usage detailed _jquery

Masonry is a very powerful jquery dynamic grid layout plug-in that helps developers quickly develop an interface effect similar to clip art. The same thing with float in CSS is that float is arranged horizontally and then vertically, using masonry to arrange the elements vertically, and then place the next element in the next development area in the grid. This effect minimizes the vertical clearance of elements with different heights. As follows:

As you can see in the diagram above, using float in the grid layout to handle elements of different heights makes the elements in the vertical direction more spaced, and the interval becomes smaller with masonry processing.

Usage

First pour into the class library, as follows:

Copy Code code 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>

The masonry is then executed against the element container as follows:

Copy Code code as follows:

$ (function () {
$ (' #container '). Masonry ({
Options
Itemselector: '. Item ',
columnwidth:240
});
});

HTML code

Copy Code code as follows:

<div id= "Container" >
<div class= "Item" >...</div>
<div class= "Item" >...</div>
<div class= "Item" >...</div>
...
</div>

Css

Copy Code code as follows:

. Item {
width:220px;
margin:10px;
Float:left;
}

If you have a picture in the element you are loading, you need to make sure that masonry does not execute until all the pictures are loaded, and you need to invoke the following code:

Copy Code code as follows:

var $container = $ (' #container ');
$container. imagesloaded (function () {
$container. Masonry ({
Itemselector: '. Item ',
columnwidth:240