JQuery Masonry waterfall stream plug-in usage details, jquerymasonry

JQuery Masonry waterfall stream plug-in usage details, jquerymasonry

Use the jQuery Masonry plug-in to create a waterfall stream page

We can use the jQuery Masonry plug-in to implement this form of page. The following describes the method.

1. Download jQuery and Masonry respectively, and load them to the page for use.

Load Code:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>

Explanation: it is very easy to embed the downloaded script file into the page that you want to use the waterfall stream form. Pay attention to the file name and path and modify it according to your actual situation.

2. Page code

<div id="masonry" class="container-fluid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> ...</div>

Explanation: place each small content block in a container with related classes, and put all the content blocks in a large container. Here we put the content block image in a container. in the <div> label of the box class, and then use the <div> with # masonry ID. We will use # masonry ID and. box class to trigger the use of waterfall streams.

3. style code

.container-fluid { padding: 20px; }.box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100%}

Explanation: For the Page code in step 2, we need to add a style. For the. box class, we have added the floating attribute and set its width.

4. Enable waterfall script code on the page

$(function() { var $container = $('#masonry'); $container.imagesLoaded(function() {  $container.masonry({    itemSelector: '.box',    gutter: 20,    isAnimated: true,   });  });});

Explanation: First, we want to locate what the large container of the waterfall stream is. Here is the <div> label with # masonry ID, in var $ container = $ ('# masonry'); this line of code is defined. Then, we also need to describe the common classes on each content block container in the waterfall stream. the <div> label of the box class, in itemSelector :'. box ', defined in this line of code.

Gutter: 20, this line of code defines the distance between content blocks is 20 pixels, isAnimated: true, this line of code can open the animation option, that is, when changing the window width, the number of content blocks displayed in each row varies, and this change uses an animated effect.

(Thanks to Alibaba Cloud!

One of my stupid methods:

$(function() { var $objbox = $("#masonry"); var gutter = 25; var centerFunc, $top0; $objbox.imagesLoaded(function() {  $objbox.masonry({   itemSelector: "#masonry > .box",   gutter: gutter,   isAnimated: true  });  centerFunc = function() {   $top0 = $objbox.children("[style*='top: 0']");   $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");  };  centerFunc(); }); var tur = true; $(window).resize(function() {  if (tur) {   setTimeout(function() {    tur = true;    centerFunc();   },   1000);   tur = false;  } });});

Source code download: http://xiazai.jb51.net/201701/yuanma/jquerymasonry (jb51.netw..rar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.