Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use jquery.masonry to achieve waterfall flow effect". In daily operation, I believe many people have doubts about how to use jquery.masonry to achieve waterfall flow effect. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use jquery.masonry to achieve waterfall flow effect". Next, please follow the editor to study!

Load the jquery plug-in and the jquery.masonry plug-in respectively

2. Local style code of waterfall flow

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

Explanation: for the second step of the page code, we need to add a little style. box class we added the floating property and set its width.

Third, page waterfall flow layout html code

Explanation: put each small content block in a container with related classes, and then put all the content blocks in a large container, here we put the content block images in a tag with a .box class, and then use them with # masonry ID, and later we will use # masonry ID and .box classes to trigger the use of waterfall flow.

4. Jquery script code that initializes the waterfall stream plug-in

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

Explanation: here we first locate what the large container that wants to use the waterfall flow is. Here is the label with # masonry ID, defined in var $container = $('# masonry');. Then we will explain what classes are common to each content block container in the waterfall stream, here is the tag with the .box class, defined in the line of code itemSelector: '.box'. GutterWidth: 20, this line of code defines that the distance between content blocks is 20 pixels, isAnimated: true, this line of code can turn on the animation option, that is, when you change the width of the window, the number of content blocks displayed per line will change, this change will use an animation effect.

At this point, the study on "how to use jquery.masonry to achieve waterfall flow effect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.