本文分別用原生JS與JQ框架寫出瀑布流佈局的方法
首先引庫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的瀑布佈局</title>
<!--<script src="js/waterfall-jx.js"></script>-->
<script src="js/ku/jquery.min.js"></script>
<script src="js/ku/jquery-2.1.4.min.js"></script>
<script src="js/waterfall-jq.js"></script>
<link href="css/waterfall-jx.css" rel="stylesheet">
</head>
<body>
<div id="main">
</div>
</body>
</html>CSS:
*{padding:0px;margin:0px;}
#main{
position: relative;
}
.pad{
padding:15px 0 0 15px;
float:left;
}
.pic{
padding:5px;
border:1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width:190px;
height: auto;
}JavaScript代碼：
window.onload = function () {
waterfall('main', 'pad');
}
function waterfall(parent, box) {
var oparent = document.getElementById(parent);
var obox = getClass(oparent, box);
var colWidth = obox[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / colWidth);
oparent.style.cssText = 'width:' + cols * colWidth + 'px;margin:0 auto';
var colHeight = new Array();
for (var i = 0; i < obox.length; i++) {
if (i < cols) {
colHeight.push(obox[i].offsetHeight);
}
else {
var colMin = Math.min.apply(null, colHeight);
var index = getMinIndex(colHeight, colMin);
obox[i].style.position = 'absolute';
obox[i].style.top = colMin + 'px';
obox[i].style.left = index*colWidth+'px';
colHeight[index]+=obox[i].offsetHeight;
}
}
}
//得到所有class爲clsName的parent子項目
function getClass(parent, clsName) {
var boxarr = new Array(),
child = parent.getElementsByTagName('*');
for (var i = 0; i < child.length; i++) {
if (child[i].className == clsName)
boxarr.push(child[i]);
}
return boxarr;
}
//獲得最小高度值box的index
function getMinIndex(h,min) {
for (var i in h) {
if (h[i] == min) {
return i;
}
}
}以下爲JQuery方法的實現：
$(function(){
var json = {"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},
{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},
{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},
{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},
{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},
{"src":"15.jpg"}]};
$.each(json.data,function(i,value){
var aPad = $("<div>").addClass("pad").appendTo($("#main"));
var aPic = $("<div>").addClass("pic").appendTo($(aPad));
$("<img />").attr('src','images/'+$(value).attr('src')).appendTo($(aPic));
});
});
window.onload = function () {
//獲得列數
var pW = $(window).width();
var boxW = $(".pad").outerWidth();
var num = Math.floor(pW/boxW);
//獲取第一行高度
var lh = [];
$(".pad").each(function(i,value){
if(i<num)
lh[i] = $(this).outerHeight();
//操作第2+行
else{
var min = Math.min.apply(null,lh);
var minIndex = $.inArray(min,lh);
$(this).css({
'position' : 'absolute',
'top' : min + 'px' ,
'left': minIndex*boxW + 'px',
});
lh[minIndex] = $(this).outerHeight()+min;
}
});
}求大神指點一二。