Detailed explanation of the use of jQuery Masonry waterfall flow plug-in_jquery

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

As you can see in the picture above, using float to process elements of different heights in grid layout will make the spacing between elements in the vertical direction larger, but after using Masonry, the spacing becomes smaller.

Usage

First pour the class library, as follows:

Copy code The code is as follows:

Then, perform masonry on the element container, as follows:

Copy code The code is as follows:

$(function(){ 
$('#container').masonry({
// options
itemSelector: '.item',
columnWidth: 240
});
});

html code

Copy code The code is as follows:

...

...

...

... 

css

Copy code The code is as follows:

.item {
width: 220px;
margin: 10px;
float: left;
}

If there are images in the element you load, you need to ensure that Masonry is executed after all images have been loaded. You need to call the following code:

Copy code The code is as follows:

var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: 240