瀑布流图片布局

最新推荐文章于 2022-05-14 08:25:48 发布

森林中的小屋

最新推荐文章于 2022-05-14 08:25:48 发布

阅读量758

点赞数 2

分类专栏： Web前端-布局文章标签： javascript 图片布局瀑布流

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/52780456

版权

Web前端-布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，并且图片可以无线加载，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

代码片段(1)[全屏查看所有代码]

1. [代码][JavaScript]代码

（1）html代码

<!DOCTYPE html>
<html>
<head>
	<title>瀑布流图片布局</title>
	<meta charset="utf-8">	
	<link type="text/css" rel="stylesheet" href="css/index.css" />
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div id="main">
        <div class="box">
    		<div class="pic">
    			<img src="images/0.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/1.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/2.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/3.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/4.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/5.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/6.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/7.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/8.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/9.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/10.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/11.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/12.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/13.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/14.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/15.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/16.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/17.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/18.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/19.jpg"/>
    		</div>
    	</div>
    	<div class="box">
    		<div class="pic">
    			<img src="images/20.jpg"/>
    		</div>
    	</div>
    </div>
</body>
</html>

( 2 )css代码

*{
	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;
	box-shadow: 0 0 5px #ccc;
}
.pic img{
	width: 165px;
	height: auto;
}

（3）js原生代码

window.onload = function() {
	waterfall('main', 'box');
	var dataInt = {
		"data": [{
			"src": '0.jpg'
		}, {
			"src": '5.jpg'
		}, {
			"src": '3.jpg'
		}, {
			"src": '8.jpg'
		}]
	}
	window.onscroll = function() {
		if(checkScrollSlide) {

			var pHali = document.getElementById('main');
			for(var i = 0; i < dataInt.data.length; i++) {
				var obox = document.createElement('div');
				obox.className = 'box';
				pHali.appendChild(obox);
				var opic = document.createElement('div');
				opic.className = 'pic';
				obox.appendChild(opic);
				var oimg = document.createElement('img');
				oimg.src = "images/" + dataInt.data[i].src;
				opic.appendChild(oimg);
			}
			waterfall('main', 'box');
		}
	}
}

function waterfall(hali, box) {
	var pHali = document.getElementById(hali);
	var oboxs = getByClass(pHali, box);

	var oboxW = oboxs[0].offsetWidth;
	var cols = Math.floor(document.documentElement.clientWidth / oboxW);

	pHali.style.cssText = 'width:' + oboxW * cols + 'px;margin:0 auto';

	var hArr = [];
	for(var i = 0; i < oboxs.length; i++) {
		if(i < cols) {
			hArr.push(oboxs[i].offsetHeight);
		} else {
			var minH = Math.min.apply(null, hArr);
			var index = getMinhIndex(hArr, minH);
			oboxs[i].style.position = 'absolute';
			oboxs[i].style.top = minH + 'px';
			oboxs[i].style.left = oboxs[index].offsetLeft + 'px';
			hArr[index] += oboxs[i].offsetHeight;
		}
	}
}

function getByClass(hali, clsName) {
	var boxArr = new Array(),
		oElements = hali.getElementsByTagName('*');
	for(var i = 0; i < oElements.length; i++) {
		if(oElements[i].className == clsName) {
			boxArr.push(oElements[i]);
		}
	}
	return boxArr;
}

function getMinhIndex(arr, val) {
	for(var i in arr) {
		if(arr[i] == val) {
			return i;
		}
	}
}

function checkScrollSlide() {
	var pHali = document.getElementById('main');
	var oboxs = getByClass(pHali, 'box');
	var lastboxH = oboxs[oboxs.length - 1].offsetTop + Math.floor(oboxs[oboxs.length - 1].offsetHeight / 2);
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.body.clientHeight || document.documentElement.clientHeight;
	return(lastboxH < scrollTop + height) ? true : false;
}

2.效果图

森林中的小屋

关注

2
点赞
踩
0

收藏

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

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，并且图片可以无线加载，当然肯定不能和以上那些优秀插件相提并论，有兴趣
复制链接

扫一扫