jQuery瀑布流技术封装并制作插件

最新推荐文章于 2025-02-14 11:51:23 发布

原创最新推荐文章于 2025-02-14 11:51:23 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

原生js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用绝对定位实现的瀑布流布局方法，并通过jQuery插件形式进行了封装，包括计算子元素的位置、调整父容器高度及响应窗口缩放等功能。

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

瀑布流布局,其实是一种绝对定位(absolute)布局.

原理分析:

1.html,css结构 : 子绝父相

<body>

...

</div>

</body>

2.给每一个子元素进行top,left设置定位

/*需求1:设置原始数据
一排元素个数n : items的宽度/item的宽度 向下取整
间隙margin: (items的宽度-n*item的宽度)/(n+1)
一排元素的总高度集合topArr: 长度为n 元素为对应item的高度 初始值都为margin
需求2:设置第一排dom元素位置
需求2.1:修改topArr里面元素的值
*/
var 
itemWidth = $('.item').width();
var n =Math.floor($('.items').width()
 /itemWidth);
var margin = ($('.items').width() -n *itemWidth)
 / (n +1);
var topArr = [];
for (vari =0;
i < n; 
i++) {
topArr[i] =margin;
$('.item').eq(i).css({
top: topArr[i],
left: (margin +itemWidth) *i +margin
});
topArr[i] +=$('.item').eq(i).height();
}
/*需求3:判断topArr中最小值及index,依次将后面的item元素放在其后面
需求3.1:每次放置后,修改topArr里面元素的值*/
for (vari =n;
i < $('.item').length;i++) {
var minH =Infinity;
var minIndex = -1;
for (varj =0;
j < n; 
j++) {
if (topArr[j] <minH) {
minH = topArr[j];
minIndex = j;
}
}
$('.item').eq(i).css({
top: minH,
left: (margin +itemWidth) *minIndex +margin
});
topArr[minIndex] +=$('.item').eq(i).height();
}

/*需求4:设置父容器高度*/
var maxH = -Infinity;
for(vari=0;i<n;i++){
if(topArr[i]>maxH){
maxH = topArr[i];
}
}
$('.items').height(maxH);

对其进行封装处理并根据jQuery插件机制制作插件
$.fn.extend({
waterfall: function () {
/*this指向调用该函数的jQuery对象*/
var itemWidth =this.children().width();
var n =Math.floor(this.width() /itemWidth);
var margin = (this.width() -n *itemWidth)
 / (n +1);
var topArr = [];
for (vari =0;
i < n; 
i++) {
topArr[i] =margin;
this.children().eq(i).css({
top: topArr[i],
left: (margin +itemWidth) *i +margin
});
topArr[i] +=this.children().eq(i).height();
}
for (vari =n;
i < this.children().length;i++) {
var minH =Infinity;
var minIndex = -1;
for (varj =0;
j < n; 
j++) {
if (topArr[j] <minH) {
minH = topArr[j];
minIndex = j;
}
}
this.children().eq(i).css({
top: minH,
left: (margin +itemWidth) *minIndex +margin
});
topArr[minIndex] +=this.children().eq(i).height();
}
var maxH = -Infinity;
for(vari=0;i<n;i++){
if(topArr[i]>maxH){
maxH = topArr[i];
}
}
this.height(maxH);
/*返回this,也是jQuery链式编程的逻辑*/
return this;
}
})



$('.items').waterfall();

3.添加浏览器缩放事件

$(window).resize(function () {
$('.items').waterfall();
});