Detailed explanation of jQuery Masonry waterfall flow layout

This article mainly introduces the use of jQuery Masonry waterfall layout artifact in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

When I was building a website recently, part of it involved a lot of picture layouts, and I wanted to use the more popular Water Flow layout.

I wrote it by myself at the beginning, which was really troublesome. I didn’t consider checking the image size. Although it can achieve the layout effect, some of the images are relatively small in size but are forcibly enlarged. See It sounds very discordant. Later, I searched online and found out that there is a very good Water Flow layout tool to use. Let’s get to know this artifact~
Name of the artifact: JQuery Masonry, URL: http://masonry.desandro.com/index.html

The method of use is quite simple:

1. Mark the container and Item that need to be laid out

Masonry needs a container to load child elements with similar structure

<p id="container"> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 ... 
</p>

Then add Jquery and Masonry script references to the page, requiring the jquery version to be 1.6+

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

2. Write CSS

The size of all elements that need to be laid out is determined by CSS, and all elements must be floated
eg:

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

3. Write a script

Write a script to pass in the initialization layout parameters and let the container layout automatically.
It is strongly recommended to configure the two parameters itemSelector and columnWidth. For more parameter configuration, please check the official website.

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

OK, that’s the end. So easy~

Let’s see the effect

Related recommendations:

jQuery.lazyload+ masonry improved image waterfall flow code_image special effects

jQuery Masonry waterfall flow plug-in usage detailed explanation_jquery

JS example of implementing waterfall flow layout analyze

The above is the detailed content of Detailed explanation of jQuery Masonry waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!