自己封装的瀑布流的小插件，含详细注释。

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30301183

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/2016-zy-3258/p/7704218.html

本文介绍了一种基于jQuery插件实现的瀑布流布局方法。该插件通过计算每个图片的位置来达到美观的瀑布流效果，并提供了间距等可配置选项。

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

// 基于jquery的瀑布流插件

$.fn.waterFall=function(option){

//option 用户传过来的{gap:15}

var defaluts={gap:20};
// 如果用户不传参数传递取默认值（图片之间的间距）
defaluts=$.extend(defaluts,option);

var _this=$(this);// _this指的就是items 盒子

var allItem=_this.children('.item'); //获取了所有的item

var itemWidth=allItem.width(); // 取第一个item的宽度

var count=Math.floor(_this.width()/(itemWidth+defaluts.gap));

// console.log(count);
//存储每一列的高度
var column=[];

//遍历所有的元素给每一图片设置坐标值
//所有元素的left坐标 left= (item的宽度+defaults.gap)* index （列数-1）
//第一行的top为0
// 第一行之后的top值不确定
allItem.each(function(index,e){
//处理第一行
if(index<count){
//设置坐标值
　　$(e).css({
　　　　top:0,
　　　　left:(itemWidth+defaluts.gap)*index+'px'
　　});

　　//记录当前每一个列的高度
　　var height=$(e).height();

　　column[index]=height;

　　console.log(column);
}else{
//第二行以下图片的处理方式
////第二行以下添加的规律：找最小列，往最小列的后面追加图片
//找出高度最小的列

var minHeight=column[0];
//记录最小的高度所在的列数 0-5
var minKey=0;
for(var i=0;i<column.length;i++){
if(minHeight>column[i]){
　　minHeight=column[i];
　　minKey=i;
　　}
}
var height=$(e).height();
$(e).css({
'top':minHeight+defaluts.gap+'px',
'left': minKey*(itemWidth+defaluts.gap)+'px'
});

//动态更新最小列的列高
column[minKey]+=height+defaluts.gap;
}

})

//找出最大的列高

var maxHeight=column[0];
for(var i=0;i<column.length;i++){
　　if(maxHeight<column[i]){
　　　　maxHeight=column[i];
　　}
}
//把itmes 设置高度
_this.height(maxHeight);

}

转载于:https://www.cnblogs.com/2016-zy-3258/p/7704218.html