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

This article will explain in detail what is the use of Waterfall.js. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

jq-waterfall is a responsive infinite dynamic loading image waterfall effect plugin for imitation Pinterest website. The waterfall effect uses ajax calls to dynamically load images to achieve unlimited loading. It is easy to use, good compatibility, worth recommending!

jq-waterfall usage

To use this waterfall plug-in you need to import jQuery and jquery.waterfall.js files.

jq-waterfall structure

HTML structure

The HTML knot for the waterfall effect uses one to wrap the image, and then one at the periphery as a wrapping container.

...

CSS style

DEMO gives the basic style of this waterfall flow, you can modify it to your own needs.

#demo{

margin:auto;

position:relative;

}

.box{

float:left;

padding:10px;

border:1pxsolid#ccc;

background:#f7f7f7;

box-shadow:008px#ccc;

}

.box:hover{box-shadow:0010px#999;}

.boximg{width:200px;}

The plugin uses Javascript to generate Pinterest-style grid waterfall layouts. Use ajaxCallback to dynamically load images as you scroll down the page for an infinite waterfall effect.

About "Waterfall.js What's the Use" This article is shared here. I hope the above content can be of some help to everyone so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

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.