<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta charset="utf-8" />
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
162px;
height:auto;
}
</style>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(window).on('load', function(){
onLoad();
$(window).on('scroll', function(){
var data = {'data':[{'src':'images/1.jpg'},{'src':'images/2.jpg'},{'src':'images/3.jpg'},{'src':'images/4.jpg'}]};
if(isOnLoad()){
$.each(data.data, function(index, item){
// var html = html + '<div class="pin"><div class="box"><img src="'+$(item).attr('src')+'" /></div></div>';
// $('#main').html(html);
var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
var $oBox = $('<div>').addClass('box').appendTo($oPin);
$('<img>').attr('src', $(item).attr('src')).appendTo($oBox);
});
onLoad();
}
})
})
function onLoad(){
var parentNode = $('#main'),
nodeChilds = $('#main div.pin');
var clientWidth = $(window).width();
var nodeWidth = nodeChilds.eq(0).outerWidth();
var num = Math.floor(clientWidth / nodeWidth);
parentNode.css({
'width': num*nodeWidth + 'px',
'margin': '0 auto'
});
var childsArr = [];
nodeChilds.each(function(index, item){
var nodeHeight = nodeChilds.eq(index).outerHeight();
if(index < num){
childsArr[index] = nodeHeight;
}else{
var minH = Math.min.apply(null, childsArr);
var minHIndex = $.inArray(minH, childsArr);
$(item).css({
'position': 'absolute',
'top': minH,
'left': nodeChilds.eq(minHIndex).position().left
});
childsArr[minHIndex] += nodeChilds.eq(index).outerHeight();
}
});
}
function isOnLoad(){
var clientHeight = $(window).height();
var nodeChilds = $('#main div.pin');
var nodeChildTop = nodeChilds.last().get(0).offsetTop + Math.floor(nodeChilds.last().outerHeight() / 2);
var scrollTop = $(window).scrollTop();
return (nodeChildTop < clientHeight + scrollTop) ? true : false;
}
// window.onload = function(){
// onloadImg('main', 'pin');
// window.onscroll = function(){
// var data = {'data':[{'src':'images/1.jpg'},{'src':'images/2.jpg'},{'src':'images/3.jpg'},{'src':'images/4.jpg'}]};
// var mainId = document.getElementById('main');
// if(isLoadImg()){
// for(var i = 0, len = data.data.length; i < len; i++){
// var divHtml = '<div class="pin"><div class="box"><img src="'+data.data[i].src+'" /></div></div>';
// // var oPinDiv = document.createElement('div');
// // oPinDiv.className = 'pin';
// // mainId.appendChild(oPinDiv);
// // var oPinBoxDiv = document.createElement('div');
// // oPinBoxDiv.className = 'box';
// // oPinDiv.appendChild(oPinBoxDiv);
// // var oImg = document.createElement('img');
// // oImg.src = 'images/' + data.data[i].src;
// // oPinBoxDiv.appendChild(oImg);
// mainId.innerHTML += divHtml;
// }
// onloadImg('main', 'pin');
// }
// }
// }
// function onloadImg(parent, classBox){
// var documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
// var oparent = document.getElementById(parent);
// var oPin = getClassName(oparent, classBox);
// var oPinWidth = oPin[0].offsetWidth;
// var num = Math.floor(documentWidth / oPinWidth);
// oparent.style.cssText = oPinWidth*num + 'px; margin:0 auto;';
// var oPinArr = [];
// for(var i = 0, len = oPin.length; i < len; i++){
// var oPinHeight = oPin[i].offsetHeight;
// if(i < num){
// oPinArr[i] = oPinHeight;
// }else{
// var minHeight = Math.min.apply(null, oPinArr);
// var minIndex = getMinHeightIndex(oPinArr, minHeight);
// oPin[i].style.position = 'absolute';
// oPin[i].style.top = minHeight + 'px';
// oPin[i].style.left = oPin[minIndex].offsetLeft + 'px';
// oPinArr[minIndex] += oPin[i].offsetHeight;
// }
// }
// }
// function getClassName(parent, className){
// var classNames = [];
// var nodes = parent.getElementsByTagName('*');
// for(var i = 0, len = nodes.length; i < len; i++){
// if(nodes[i].className == className ){
// classNames.push(nodes[i]);
// }
// }
// return classNames;
// }
// function getMinHeightIndex(arr, minH){
// for(var i in arr){
// if(arr[i] == minH){
// return i;
// }
// }
// }
// function isLoadImg(){
// var mainId = document.getElementById('main');
// var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// var oPin = getClassName(mainId,'pin');
// var oLast = oPin[oPin.length - 1];
// var oLastHeight = oLast.offsetTop + Math.floor(oLast.offsetHeight / 2);
// var scroTop = document.documentElement.scrollTop || document.body.scrollTop;
// return (oLastHeight < scroTop + clientHeight) ? true : false;
// }
</script>
</html>