<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery瀑布流布局</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
#main {
position:relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding:10px;
border:1px solid #ccc;
border-radius:5px;
border-shadow:0 0 5px #ccc;
}
.pic img {
width:165px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-9.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-9.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-8.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-7.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-9.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x300-9.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
</div>
</div>
<script>
/**
* Created by zyn on 2017/6/8.
*/
$(window).on('load', function() {
waterfall();
var dataInt = {
"data": [{
"src": "http://www.jq22.com/img/cs/500x500-1.png"
}, {
"src": "http://www.jq22.com/img/cs/500x300-2.png"
}, {
"src": "http://www.jq22.com/img/cs/300x500-9.png"
}]
};
$(window).on('scroll', function() {
if (checkScrollSlide) {
$.each(dataInt.data, function(key, value) {
// console.log(value);
var oBox = $('<div>').addClass('box').appendTo($('#main'));
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall() {
var $boxs = $('#main>div');
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width() / w);
$('#main').width(w * cols).css('margin', '0 auto');
var hArr = [];
$boxs.each(function(index, value) {
//console.log(index);
var h = $boxs.eq(index).outerHeight();
if (index < cols) {
hArr[index] = h;
} else {
var minH = Math.min.apply(null, hArr);
var minHIndex = $.inArray(minH, hArr);
//console.log(value);
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': minHIndex * w + 'px'
})
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
//console.log(hArr);
}
function checkScrollSlide() {
var $lastBox = $('#main>div').last();
var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lastBoxDis < scrollTop + documentH) ? true : false;
}
</script>
</body>
</html>
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
