图片瀑布流布局
jQuery-waterfall 图片瀑布流布局
版本:1.0.57
更新:2013.05.07
下载:waterfall-v1.0.57.rar
演示:在线演示
应用:我不忙图片分享
页面调用设置
$(document).ready(function(){ loadData(); //首次加载 }); $.scrollBottom(function(){ loadData(); //滚动条到底部加载 }); function loadData(){ ...省略代码... var arrCells = []; ...省略代码... $("div#container").waterfall(arrCells); };
插件配置
var opt = { //用户自定义配置 cellWidth: 190, //单元格宽度 cellMargin: 10, //单元格边距 showFade: true, //渐显效果 showFadeSpeed: 600, //渐显效果速度 insertToShort: true, //往短的列插入,不设置等待图片时会有误差 waitImage:true //等待图片加载完再插入,因网络问题会造成卡 };
实现原理
- 计算容器宽度得出列的总数,向容器创建若干列,每列左浮动排列。此方法不需要计算每个单元格的坐标。
- 创建单元格,计算每个单元格插入相对应的列。可从左到右插入,也可以往最短的列插入。
- 需要显示的内容全放入单元格里,再使用样式设置。这样让更多的设计交给使用者。
更多请点击体验 在线演示