jquery2014-08-06 06:34:20 7783
Jquery实现的瀑布流布局,可以自适应浏览器大小。调用时只需要传入模块个数,每行的个数,模块边距即可快速动态生成瀑布流布局页面。通过重写每个模块的CSS或者内部元素,即可适用于您的风格或者需求。
源代码:
var WaterFlow = { data:null, mWidth: "0", initialize: function(allNum,aCell,margin) { var mMargin=margin; this.mWidth =$("#Main").width()>600?$("#Main").width():600; if(aCell*margin>=this.mWidth) { alert("行数太多"); return; } $container = $(""); $container.css({ "width": this.mWidth "px" }); $("#Main").append($container); var rowsNub = aCell; //总共有多少行 var allRows=allNum%aCell>0?Math.floor(allNum / aCell) 1:Math.floor(allNum / aCell) 1; var childheight = "250"; //高度数组 var topArray =new Array(); for(var i=0;i<aCell;i ){ topArray[i]=0; } for (var i = 0; i < allNum; i ) { childheight = parseInt(Math.random() * (300 - 150) 150); //宽度数 var childWidth = (this.mWidth - mMargin * (rowsNub - 1)) / rowsNub; //第几层 var rows = (i 1) % rowsNub > 0 || i == 0 ? Math.floor((i 1) / rowsNub) 1 : Math.floor((i 1) / rowsNub); //计算出改板块是横排的第几个 var index = i % aCell; //该层的top childTop = topArray[index] (rows - 1) * mMargin; $mItem = $(""); $mItem.css({ "width": childWidth "px", "height": childheight "px", "position": "absolute", "marginTop":topArray[index] "px","margin-left":childWidth * index "px", "border": "1px solid #ccc","background-color":"#f6f5ec" }); $mItem.animate({ marginLeft: childWidth * index (index * mMargin) "px", marginTop: childTop "px",height:childheight "px", }, 1000); $container.append($mItem); topArray[index] = childheight; } $("#Main").css("height",this.SortHeightHandler(topArray) mMargin*(allRows-1) "px"); }, SortHeightHandler:function(array) { for (var i = 0; i < array.length; i ) { for (var j = i 1; j < array.length; j ) { if (array[i] < array[j]) { var temp = array[i]; array[i] = array[j]; array[j] = temp; } } } return array[0]; } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jq瀑布流布局,html瀑布流布局,html图片瀑布流
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/Njg=.html
下一篇 JqueryAnimate对象