JQuery Masonry-a powerful dynamic irregular layout plug-in that makes your webpage more natural !, Jquerymasonry-

JQuery Masonry-a powerful dynamic irregular layout plug-in that makes your webpage more natural !, Jquerymasonry-

MasonryIt 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 results in a large interval between elements in the vertical direction.MasonryAfter processing, the interval decreases.

Usage

First, import the class library as follows:

. Code

1. <Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
2. </Script> <script src = "/path/to/jquery. masonry. min. js"> </script>

 

 

Then, execute masonry for the element container as follows:

. Code

1. $ (Function (){
2. $ ('# Iner'). masonry ({
3. // Options
4. ItemSelector: '. item ',
5. ColumnWidth: 240
6. });
7. });

 

 

Html code

. Code

1. <Div id = "container">
2. <Div class = "item">... </div>
3. <Div class = "item">... </div>
4. <Div class = "item">... </div>
5. ...
6. </Div>

 

Css

. Code

1. . Item {
2. Width: 220px;
3. Margin: 10px;
4. Float: left;
5. }

 

If the elements you load contain images, make sure thatMasonryRun the following code after all images are loaded:

. Code

1. Var $ container = $ ('# iner ');
2. $ Container. imagesLoaded (function (){
3. $ Container. masonry ({
4. ItemSelector: '. item ',
5. ColumnWidth: 240
6. });
7. });

Jquerymasonryminjs Click Event trigger on the page to add the length of the specified unit.

Look at the layer of your css. Is it overflow: What is hiden set to hide when it exceeds the upper limit?
 
What is the principle of waterfall layout or jquery masonry?

Masonry has nothing to do with jQuery.
It is calculated by the width and height of the block elements that have been laid out and is absolutely positioned.