js 瀑布流

最新推荐文章于 2023-03-19 19:23:07 发布

binglinglong2

最新推荐文章于 2023-03-19 19:23:07 发布

阅读量1k

点赞数

分类专栏： js 瀑布流文章标签： js 图片瀑布流

本文链接：https://blog.csdn.net/binglinglong2/article/details/21636407

版权

js 瀑布流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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++;
		}
	}
});

binglinglong2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 瀑布流

js瀑布流的常见思路1.将图片分成几列，这几列的父层元素的可设float属性为left。2.取得float的高度值，并获取高度最小的元素的index值。3新建一个图片元素，并将该图片导入到高度最小的元素中。以下为一些测试代码，其js部分则是用的网上比较流行的一个代码，并做了稍微修改。html部分.wrap { margin: 20px auto; width:
复制链接

扫一扫

专栏目录