DDR爱好者之家

jquery实现超简单的瀑布流布局【推荐】
站长资源 2025/10/29 佚名
7 1538
DDR爱好者之家 Design By 杰米

1.看看效果吧！

jquery实现超简单的瀑布流布局【推荐】

2.html代码index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}
 li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; }
 img{width: 100%;height: auto;display: block;}
 </style>
 <script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">


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 ;i<ops.column;i++){
 columnHeight.push(0);
 }
 setTimeout(function () {
 for(var j =0 ; j< _this.length ;j++){
 console.log(columnHeight[columnIndex]);
 $(_this).eq(j).css({
 'top':columnHeight[columnIndex]+ops.gapHeight+'px',
 'left':_pWidth*columnIndex/3+'px'
 })
 columnHeight[columnIndex]+=$(_this).eq(j).height()+ops.gapHeight
 columnIndex=getIndex();
 }
 },50)
 function getIndex() {
 var columnIndex=0,maxHeight=0;
 for(var i =0 ;i < columnHeight.length ;i++){
 if(columnHeight[i]<columnHeight[columnIndex]){
 columnIndex=i;
 }
 if(columnHeight[i]>maxHeight){
 maxHeight=columnHeight[i]
 }
 }
 $(".flowLayout-box").css({
 'opacity':1,
 'height':maxHeight
 });
 return columnIndex;
 }
 }
 })(jQuery);　





4.调用代码





$(function () {
 $('.flowLayout-box li').flowLayout({});
 })





代码简单，容易修改，，拿去用吧。。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米