jquery實現瀑布流布局
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="index.css"/> <script src="jquery-1.7.1.min.js"></script> <script src="index.js"></script></head>
<body>
<div>
<div><img src="imgs/1.jpg" alt=""/></div> <div><img src="imgs/2.jpg" alt=""/></div> <div><img src="imgs/3.jpg" alt=""/></div> <div><img src="imgs/4.jpg" alt=""/></div> <div><img src="imgs/5.jpg" alt=""/></div> <div><img src="imgs/6.jpg" alt=""/></div> <div><img src="imgs/7.jpg" alt=""/></div> <div><img src="imgs/8.jpg" alt=""/></div> <div><img src="imgs/9.jpg" alt=""/></div> <div><img src="imgs/10.jpg" alt=""/></div> <div><img src="imgs/11.jpg" alt=""/></div> <div><img src="imgs/12.jpg" alt=""/></div> <div><img src="imgs/13.jpg" alt=""/></div> <div><img src="imgs/14.jpg" alt=""/></div> <div><img src="imgs/15.jpg" alt=""/></div> <div><img src="imgs/16.jpg" alt=""/></div> <div><img src="imgs/17.jpg" alt=""/></div> <div><img src="imgs/18.jpg" alt=""/></div> <div><img src="imgs/19.jpg" alt=""/></div> <div><img src="imgs/20.jpg" alt=""/></div> <div><img src="imgs/21.jpg" alt=""/></div> <div><img src="imgs/22.jpg" alt=""/></div> <div><img src="imgs/23.jpg" alt=""/></div> <div><img src="imgs/24.jpg" alt=""/></div> <div><img src="imgs/25.jpg" alt=""/></div> <div><img src="imgs/26.jpg" alt=""/></div> <div><img src="imgs/27.jpg" alt=""/></div> <div><img src="imgs/28.jpg" alt=""/></div></div>
</body>
</html>
css：
*{
margin: 0; padding: 0;}
.walterfull{
position: relative;}
.box{
float: left; padding: 10px; border: 1px solid #ccc; margin: 15px 0 0 15px; box-shadow: 0 0 5px pink;}
img{
width: 180px;}
js：
/**
Created by ll0u on 1/7/2015.
*/
$(window).load(function(){
walterFall();
$(window).on('scroll', function(){
if(checkLoad()){
var boxList = $('.walterfull>.box');
$.each(data.imgs, function(index, value){
var oBox = $('<div>').addClass('box').appendTo($('.walterfull'));
var oImg = $('<img>').attr('src', value.url).appendTo(oBox);
minH = Math.min.apply(null, colH);
minHIndex = $.inArray(minH, colH);
console.log(minH)
console.log(boxList.eq(minHIndex).position().left)
oBox.css({
position: 'absolute',
top: minH,
left: boxList.eq(minHIndex).position().left
})
colH[minHIndex] += oBox.outerHeight(true);
})
}else{
}
})
})
var data = {imgs:
[
{url: 'imgs/28.jpg'},
{url: 'imgs/29.jpg'},
{url: 'imgs/30.jpg'},
{url: 'imgs/31.jpg'},
{url: 'imgs/32.jpg'}
]
}
var colH = []; //存放每一列的高度
var minH = 0; //存放最小高度
function walterFall(){
var oParent = $('.walterfull');
var boxList = $('.walterfull>.box');
var screenW = $(window).width();
var screenH = $(window).height();
var boxW = boxList.eq(0).outerWidth(true);
var columns = Math.floor(screenW/boxW);
var minHIndex = 0; //存放最小高度的列
oParent.css({
width: columns * boxW + parseInt($(boxList[0]).css('marginLeft')),
margin: '0 auto'
})
boxList.each(function(index, dom){
if(index < columns){
colH.push($(dom).outerHeight(true));
}else{
minH = Math.min.apply(null, colH);
minHIndex = $.inArray(minH, colH);
$(dom).css({
position: 'absolute',
top: minH,
left: boxList.eq(minHIndex).position().left
})
colH[minHIndex] += $(dom).outerHeight(true);
}
})
}
function checkLoad(){
var lastBox = $('.walterfull>.box').last();
var disT = lastBox.offset().top + Math.floor(lastBox.outerHeight(true)/2);
var screenT = $(window).height() + $(window).scrollTop();
return disT<screenT ? true : false;
}</pre>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！