您的位置：首页 > 其它

瀑布流布局

2015-11-30 14:09 302 查看
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,
ul {
margin: 0;
padding: 0;
}

ul,
li {
list-style: none;
}

.water_box {
position: relative;
margin-left: 90px;
}

.water_box .img {
width: 360px;
}

.water_box img {
width: 360px;
}

.test-banner {
width: 100%;
background: url(img/about-img.jpg) center bottom no-repeat \9;
background: url(img/about-img.jpg) center bottom/cover no-repeat;
}
</style>
</head>

<body>
<div class="water_box">
<ul>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test3.jpg" /></li>
<li class="img"><img class="loading" src="img/test4.png" /></li>
<li class="img"><img class="loading" src="img/5.jpg" /></li>
<li class="img"><img class="loading" src="img/test3.jpg" /></li>
<li class="img"><img class="loading" src="img/5.jpg" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test4.png" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/5.jpg" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test3.jpg" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/test4.png" /></li>
<li class="img"><img class="loading" src="img/test.jpg" /></li>
<li class="img"><img class="loading" src="img/5.jpg" /></li>
</ul>
</div>
<script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
(function(jQuery) {
$.fn.Waterfall = function(setting) {
return this.each(function() {
var defaults = {
width: 360,
marginT: 5,
marginL: 5,
speed: 700,
cn: 'li',
delTime: 3000
};
var dataArr = [],
boxArr = [],
BoxLengthArr = [],
ResaultArr = [];
$self = $(this);
$selfL = $self.offset().left;
$selfT = $self.offset().top;
var rowold, max = 0;
var set = $.extend(defaults, setting);
var checkMinI = function(arr) {
var MinNum = arr[0];
for (var i = 1, len = arr.length; i < len; i++) {
MinNum = Math.min(MinNum, arr[i])
};
for (var i in arr) {
if (arr[i] == MinNum) {
return i
}
}
};
var checkMax = function(arr) {
var maxNum = arr[0];
for (var i = 1, len = arr.length; i < len; i++) {
maxNum = Math.max(maxNum, arr[i])
};
for (var i in arr) {
if (arr[i] == maxNum) {
s = i;
break
}
};
this.i = s;
this.max = maxNum;
return this
};
var Sub = function(arr) {
var sub = 0;
for (var i in arr) {
sub += arr[i]
};
return sub
};
var init = function() {
var boxWidth = $self.width();
if (boxWidth < set.width) return;
var largeI;
var row = Math.floor((boxWidth + set.marginL) / (set.width + set.marginL));
rowold = row;
dataArr = [];
boxArr = [];
BoxLengthArr = [];
$self.find("." + set.cn).each(function(i) {
dataArr[i] = $(this).height()
});
for (var i = 0; i < row; i++) {
boxArr[i] = null;
boxArr[i] = {};
boxArr[i]['arr'] = [];
boxArr[i]['key'] = []
};
for (var i = 0, len = dataArr.length; i < len; i++) {
for (var j = 0; j < row; j++) {
BoxLengthArr[j] = Sub(boxArr[j]['arr'])
}
num = checkMinI(BoxLengthArr);
boxArr[num]['key'][boxArr[num]['key'].length] = i;
boxArr[num]['arr'][boxArr[num]['arr'].length] = dataArr[i]
};
for (var i = 0, len = len; i < len; i++) {
for (var j = 0; j < row; j++) {
BoxLengthArr[j] = Sub(boxArr[j]['arr'])
}
max = checkMax(BoxLengthArr).max;
largeI = checkMax(BoxLengthArr).i
};
var maxMarginT = boxArr[largeI]['key'].length * set.marginT;
$self.height(max + maxMarginT);
return boxArr
};
var setPosition = function(ARR) {
for (var i in ARR) {
for (var j in ARR[i].key) {
var rowN = ARR[i].key[j];
var topN = 0;
for (var k = 0; k < j; k++) {
topN = topN + ARR[i].arr[k]
}
$self.find("." + set.cn).eq(rowN).css({
'left': i * (set.width + set.marginL),
'top': topN + (j * set.marginT) + set.marginT
}).fadeIn(set.speed)
}
}
};
var AnimateFn = function(ARR) {
for (var i in ARR) {
for (var j in ARR[i].key) {
var rowN = ARR[i].key[j];
var topN = 0;
for (var k = 0; k < j; k++) {
topN = topN + ARR[i].arr[k]
}
$self.find("." + set.cn).eq(rowN).stop().animate({
'left': i * (set.width + set.marginL),
'top': topN + (j * set.marginT) + set.marginT
})
}
}
};
$self.find("." + set.cn).each(function(i) {
var $div = $(this);
$div.css('position', 'absolute')
});
setPosition(init());
$(window).resize(function() {
var boxWidth = $self.width();
var row = Math.floor((boxWidth + set.marginL) / (set.width + set.marginL));
if (rowold != row) {
rowold = row;
AnimateFn(init())
}
})
})
}
})(jQuery);
$(function() {
$('.water_box').Waterfall({
cn: 'img',
width: 360,
speed: 0,
marginT: 16,
marginL: 16,
delTime: 0
});
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航