Get the App
SLTechnology News&Howtos  ›  Development  › 

What's the use of Waterfall.js?

Shulou Source: shulou.com Published: 2022-06-03 09:48:00 10月27日 Update

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.

Tags: Waterfalls pictures styles dynamics plug-ins special effects articles packages effects more structure good practical usage compatibility content containers files articles methods Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno NVidia Microsoft Apple Huawei macOS