js瀑布流的常见思路
1.将图片分成几列,这几列的父层元素的可设float属性为left。
2.取得float的高度值,并获取高度最小的元素的index值。
3新建一个图片元素,并将该图片导入到高度最小的元素中。
以下为一些测试代码,其js部分则是用的网上比较流行的一个代码,并做了稍微修改。
html部分
<style>
.wrap {
margin: 20px auto;
width: 150px;
}
.wrap div {
border: 1px dotted #E29808;
height: 30px;
line-height: 30px;
margin: 5px auto;
text-align: center;
width: 150px;
}
.wrap .sortable {
background-color: #E6D6AB;
border: 1px solid #E29808;
}
#showImg li{
width:30%;
margin-left:2%;
margin-top:15px;
float:left;
background:#CCC;
}
#showImg li:nth-child(3n-2){
margin-left:3%;
}
#showImg li img{
width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div id="showImg">
<li class="pin">
<div class="box">
<img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt="test" />
</div>
</li>
<li class="pin">
<div class="box">
<img src="http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg" alt="test" />
</div>
</li>
<li class="pin">
<div class="box">
<img src="http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg" alt="test" />
</div>
</li>
</div>
</body>
js部分
var imgsglobal=[
"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg",
"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg",
"http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg",
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201112/04/20111204170801_fiBKm.jpg",
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg",
"http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg",
"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg",
"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg",
"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg",
"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8.thumb.600_0.jpg"
];
(function(win){
var isScroll=false; //滚动时是否触发函数
function getByClass(classStr, elems){
var arr=[], reg=new RegExp("(^|\\s+)"+classStr+"(\\s|$)","g");
var nodes=elems.getElementsByTagName("*");
for(var i=0, len=nodes.length; i<len; i++){
if(reg.test(nodes[i].className)){
arr.push(nodes[i]);
reg.lastIndex=0;
}
}
return arr;
}
function getMinPin(classPin){
var arr=classPin;
var index=0;
var themin=arr[0].offsetHeight;
for(var i=0, len=arr.length; i<len; i++){
if(themin>arr[i].offsetHeight){
themin=arr[i].offsetHeight;
index=i;
}
}
return index;
}
function pos(obj){
var iTop=0;
while(obj){
iTop+=obj.offsetTop;
obj=obj.offsetParent;
}
return iTop;
}
function viewH(){
return document.documentElement.clientHeight;
}
function scrollY(){
return document.documentElement.scrollTop||document.body.scrollTop;
}
var waterfall=win['waterfall']||{};
waterfall={
scrollFuc:function(parentId, classStr, imgArr){
var pins=this.pins;
var _index=getMinPin(pins);
var oLi=pins[_index];
var ih=pos(oLi)+oLi.offsetHeight;
if(isScroll&&(ih<(viewH()+scrollY()))){
console.log('test');
isScroll=false;
waterfall.init(parentId, classStr, imgArr);
return true;
}else{
return false;
}
},
pins:null,
init:function(parentId, classStr, imgArr){
var liEles=document.getElementById(parentId);
var pins=getByClass(classStr, liEles);
this.pins=pins;
var Index=0; //记录图片数量
var imglen=imgArr.length;
function showImg(){
var oDiv=document.createElement('div');
var oImg=document.createElement('img');
oDiv.className='box';
oDiv.appendChild(oImg);
oImg.src='';
var minIndex=getMinPin(pins);
pins[minIndex].appendChild(oDiv);
if(imgArr[Index]){
oImges=new Image();
oImges.οnlοad=function(){
oImg.src=this.src;
if(Index<imglen-1){
Index++;
showImg();
}else{
isScroll=true;
}
}
oImges.src=imgArr[Index];
}else{
if(Index<imglen-1){
Index++;
showImg();
}else{
isScroll=true;
}
}
}
showImg();
}
}
win.waterfall=waterfall;
})(window);
$(document).ready(function(){
var testnum=0;
waterfall.init("showImg","pin", imgsglobal);
window.οnscrοll=function(){
if(testnum>1){
return;
}
var backval=waterfall.scrollFuc("showImg","pin", imgsglobal);
if(backval){
testnum++;
}
}
});