jq-waterfall 瀑布流

最新推荐文章于 2024-04-16 10:05:10 发布

dxj124

最新推荐文章于 2024-04-16 10:05:10 发布

阅读量431

点赞数 1

分类专栏：功能组件

本文链接：https://blog.csdn.net/dxj124/article/details/97245066

版权

功能组件专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何使用jQuery实现一个名为jq-waterfall的瀑布流插件。内容包括HTML结构的设置，基本CSS样式的应用，以及如何通过调用插件并配置参数来创建Pinterest风格的网格布局，并利用ajaxCallback实现动态加载，打造无限滚动的瀑布流效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法

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

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

HTML结构

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

<div id="demo">

<div class="box"><img src="img/01.jpg" alt=""></div>

<div class="box"><img src="img/02.jpg" alt=""></div>

<div class="box"><img src="img/03.jpg" alt=""></div>

...

</div>

CSS样式

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

#demo {

margin: auto;

position: relative;

}

.box {

float: left;

padding: 10px;

border: 1px solid #ccc;

background: #f7f7f7;

box-shadow: 0 0 8px #ccc;

}

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

.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