本文主要介绍了jquery实现超简单的瀑布流布局的实例，代码简单，容易修改。下面跟着小编一起来看下吧，希望能帮助到大家。
1.看看效果吧！
2.html代码index.html
Title
3.插件代码
(function ($) {
$.fn.flowLayout = function(options) {
var dft = {
gapWidth:16, //间隙
gapHeight:16, //间歇
column:3 //列
};
var ops = $.extend(dft,options);
var _this = $(this);
_this.width((_this.parents('.flowLayout-box').width()-2*ops.gapWidth)/3)
var _pWidth=_this.parents('.flowLayout-box').width();
$(".flowLayout-box").css({
'opacity':0
});
var columnHeight=[],columnIndex=0;
for (var i=0 ;imaxHeight){
maxHeight=columnHeight[i]
}
}
$(".flowLayout-box").css({
'opacity':1,
'height':maxHeight
});
return columnIndex;
}
}
})(jQuery); 4.调用代码
$(function () {
$('.flowLayout-box li').flowLayout({});
})代码简单，容易修改，，拿去用吧。
相关推荐：
S-CMS企业建站系统(含APP/小程序)5.0 build20230614
下载
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
