JQuery masonry-Powerful dynamic irregular layout plugin that makes your Web page more natural

Masonry is a very powerful jquery dynamic grid layout plug-in that helps developers quickly develop an interface effect similar to clip art. The difference between float and 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, using float in a grid layout to handle elements of different heights makes the distance between elements in the vertical direction larger, and the interval becomes smaller after using masonry processing.

Usage

First pour into 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 the masonry for the element container, as follows:

. Code

1. $ (function () {
2. $ (' #container '). Masonry ({
3. Options
4. Itemselector: '. Item ',
5. ColumnWidth:
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 you have a picture in your loaded element, you need to make sure that masonry executes after all of the pictures have been loaded, calling the following code:

. Code

1. var $container = $ (' #container ');
2. $container. imagesloaded (function () {
3. $container. Masonry ({
4. Itemselector: '. Item ',
5. ColumnWidth:
6. });
7. });

JQuery masonry-Powerful dynamic irregular layout plugin that makes your Web page more natural