JQuery Masonry-powerful dynamic irregular layout plug-in makes your web page more natural, jquerymasonry-

JQuery Masonry-powerful dynamic irregular layout plug-in makes your web page 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.

A front-end UI framework that can improve development efficiency by 500%!

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 can improve the development efficiency by 500%!

. 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. });

Javascript or jquery plug-in masonry, which can be used directly.

Sent...

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.