waterfall.js

jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。该瀑布流特效使用ajax调用来动态加载图片，达到无限加载的效果。它使用简单，兼容性好，值得推荐！

使用方法

使用这个瀑布流插件需要引入jQuery和jquery.waterfall.js文件。

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.waterfall.js"></script>

HTML结构

该瀑布流特效的HTML结个使用一个<div>来包裹图片，然后在外围使用一个<div>作为包裹容器。

1 <div id="demo">
2   <div class="box"><img src="img/01.jpg" alt=""></div>
3   <div class="box"><img src="img/02.jpg" alt=""></div>
4   <div class="box"><img src="img/03.jpg" alt=""></div>
5   ...
6 </div>

CSS样式

DEMO中给出了这个瀑布流的基本样式，你可以自行修改为你需要的瀑布流样式。

 1 #demo {
 2   margin: auto;
 3   position: relative;
 4 }
 5
 6 .box {
 7   float: left;
 8   padding: 10px;
 9   border: 1px solid #ccc;
10   background: #f7f7f7;
11   box-shadow: 0 0 8px #ccc;
12 }
13
14 .box:hover { box-shadow: 0 0 10px #999; }
15
16 .box img { width: 200px; }

调用插件

插件使用Javascript来生成Pinterest样式的网格瀑布流布局。使用ajaxCallback来在页面向下滚动的时候对图片进行动态加载，以达到无限瀑布流的效果。

$("#demo").waterfall({itemClass: ".box",minColCount: 2,spacingHeight: 10,resizeable: true,ajaxCallback: function(success, end) {var data = {"data": [{ "src": "03.jpg" }, { "src": "04.jpg" }, { "src": "02.jpg" }, { "src": "05.jpg" }, { "src": "01.jpg" }, { "src": "06.jpg" }]};var str = "";var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>'for(var i = 0; i < data.data.length; i++) {str += templ.replace("{{src}}", data.data[i].src);}$(str).appendTo($("#div1"));success();end();}
});

配置参数

下面是该瀑布流特效的可用参数。

参数	默认值	描述
itemClass	"waterfall-item"	图片网格元素的class名称
spacingWidth	10	图片网格元素的水平间距
spacingHeight	10	图片网格元素的垂直间距
minColCount	2	瀑布流布局的最小列数
resizeable	false	是否在浏览器窗口缩放时触发positionAll()方法
itemAlign	"center"	图片网格元素的对齐方式，可选：center\|left
isFadeIn	true	是否在加载图片时使用淡入淡出效果
ajaxCallback	null	ajax回调函数，有2个可用参数：success, end

转载于:https://www.cnblogs.com/yangguoe/p/8506276.html

waterfall.js相关推荐

html瀑布流布局layui,瀑布流插件jquery.waterfall.js 的使用
美腿图库,冲!冲!冲 $(function() { $('#div1 a').lightBox(); }); .jq22-container { margin-top: 50px; } #div1 { ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
运用流体布局的html代码,jquery 流体布局插件:Waterfall
流体布局(一) jQuery插件:jQuery.Waterfall.js, js的计算方法 jQuery1.4.4,IE8.0,opera,firefox,chrome测试通过围观请点击:http: ...
前端小项目之在线便利贴
实现的效果如下: 界面可能不是太好看?,考虑到容器的高度会被拉长,因此没有用图片做背景. 预览便利贴涉及的知识点 sass(css 预编译器) webpack(自动化构建工具,实现LESS,CSS ...
html瀑布流下拉刷新,瀑布流下拉刷新 - osc_1wnye1so的个人空间 - OSCHINA - 中文开源技术交流社区...
知识点:使用瀑布流,实现数据列表的下拉刷新 (1)引入waterfall.js,jquery.imageload.js,handlebars.js三个js文件 (2)前端页面 {{#waterfall ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
Jquery之瀑布流
效果图展示: 示例代码如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
关于微信小程序简单瀑布流的制作
应业务需要,制作了简单的瀑布流,应用于购物平台. 首先是单个内容组件.考虑到后台计算的消耗,因而将内容里的图片高度采用直接输入.到时传入数据时需注意. <!--components/showit ...
谈谈个人网站的建立（七）—— 那些建站必备的插件
欢迎访问我的网站http://www.wenzhihuai.com/ .感谢,如果可以,希望能在GitHub上给个star,GitHub地址https://github.com/Zephery/new ...
Normal Libs For Javascript
数据来自BootCDN ["twitter-bootstrap","vue","react","react-dom",& ...