JavaScript、jQuery、css3实现瀑布流加载

最新推荐文章于 2023-10-21 13:25:00 发布

tyilack_小小黑

最新推荐文章于 2023-10-21 13:25:00 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u014520745/article/details/50785958

版权

javascript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

css3

5 篇文章 1 订阅

订阅专栏

实现的最终效果如下：

在实现的过程中用到的有：

1.css设置边框为圆角：

border-radius: 5px;

2.创建表情并添加、嵌套：

var oBox = document.createElement("div");
oBox.className = "box";
oParent.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);

3.考虑浏览器兼容获取的浏览器高度和滚动条滚动距离

//浏览器兼容
//获取滚动条滚动的距离
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//获取用户浏览器窗口的高度
var height = document.body.clientHeight || document.documentElement.clientHeight;

4.jQuery创建标签并添加属性然后嵌套加入：

var oBox = $("<div>").addClass("box").appendTo($("#main"));
var oPic = $("<div>").addClass("pic").appendTo($(oBox));
$("<img>").attr("src", "images/"+$(value).attr("src")).appendTo(oPic);

5.jQuery的一些常用方法，可以看到jQuery比原生JavaScript好的地方是它并不需要过多地考虑兼容，很多方法已经帮我们封装好了：

//大于号表示只去一级子元素，last表示去元素中的最后一个
var $lastBox = $("#main>div").last();
//offset().top获取元素距离顶部的高度，outerHeight()表示元素自身的高度
var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);
//获取滑动的距离
var scrollTop = $(window).scrollTop();
//获取浏览器窗口的高度
var documentH = $(window).height();

6.$.inArray判断某一个值在数组中的下标

//$.inArray判断某一个值在数组中的下标
var minHIndex = $.inArray(minH, hArr);

7.为元素添加css样式：

$(value).css({
	"position" : "absolute",
	"top" : minH + "px",
	"left" : minHIndex*w + "px"
});

8.根据下标找到元素：

$boxs.eq(index)

html文件如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流布局</title>
	<link rel="stylesheet" type="text/css" href="css/index2.css">
	<!-- <link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js_frame/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="js/index2.js"></script> -->
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic">
				<img src="images/0.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/1.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/2.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/3.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/4.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/5.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/6.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/7.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/8.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/9.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/10.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/11.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/12.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/13.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/14.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/15.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/16.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/17.jpg" alt=""\>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/18.jpg" alt="">
			</div>
		</div>
	</div>
</body>
</html>

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.原生JavaScript实现功能：

/*原生JavaScript实现功能*/
window.onload = function() {
	waterfall('main', 'box');
	var dataInt = {"data":[{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"}]}
	window.onscroll = function() {
		if (checkScrollSlide) {
			var oParent = document.getElementById("main");
			//将数据块渲染到当前页面的尾部
			for(var i = 0; i < dataInt.data.length; i++) {
				var oBox = document.createElement("div");
				oBox.className = "box";
				oParent.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 checkScrollSlide() {
	var oParent = document.getElementById("main");
	var oBoxs = getByClass(oParent, "box");
	//获取最后一个盒子和页面顶部的距离用offsetTop
	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;
}


function waterfall(parent, box) {
	//将main下的所有class为box的元素取出来
	var oParent = document.getElementById(parent);
	var oBoxs = getByClass(oParent, box);


	//计算整个页面显示的页数(页面宽/box的宽)
	var oBoxw = oBoxs[0].offsetWidth;
	//console.log(oBoxw);
	var cols = Math.floor(document.documentElement.clientWidth / oBoxw);
	//设置main的宽度
	oParent.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 {
			//min不能传数组，加入apply方法解决问题
			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 = oBoxw * index + 'px';
			oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
			hArr[index] += oBoxs[i].offsetHeight;
		}
	}
	console.log(hArr);
}


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


//根据class获取元素
function getByClass(parent, clsName) {
	var boxArr = new Array();//用来存储获取到的所有class为box的元素
	oElements = parent.getElementsByTagName('*');
	for(var i = 0; i < oElements.length; i++) {
		if (oElements[i].className == clsName) {
			boxArr.push(oElements[i]);
		}
	}


	return boxArr;
}

使用jQuery实现功能：

/*使用jQuery实现功能*/
$(window).on("load", function() {
	waterfall();
	$(window).on("scroll", function() {
		if (checkScrollSlide()) {
			var dataInt = {"data":[{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"}]}
			$.each(dataInt.data, function(key, value) {
				var oBox = $("<div>").addClass("box").appendTo($("#main"));
				var oPic = $("<div>").addClass("pic").appendTo($(oBox));
				$("<img>").attr("src", "images/"+$(value).attr("src")).appendTo(oPic);
				
			})
			waterfall();
		}
	});
})

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();
	// console.log("lastBoxDis="+lastBoxDis);
	// console.log("scrollTop+documentH="+(scrollTop+documentH));
	return (lastBoxDis < scrollTop+documentH) ? true : false;
}

function waterfall() {
	//匹配id=main下的一级div
	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) {
		var h = $boxs.eq(index).outerHeight();
		if (index < cols) {
			hArr[index] = h;
		} else {
			var minH = Math.min.apply(null, hArr);
			//$.inArray判断某一个值在数组中的下标
			var minHIndex = $.inArray(minH, hArr);

			$(value).css({
				"position" : "absolute",
				"top" : minH + "px",
				"left" : minHIndex*w + "px"
			});

			hArr[minHIndex] += $boxs.eq(index).outerHeight();
		}
	});
}

使用css3实现功能，这里只需要设置好宽度，css3会自动进行分栏处理：

#main {
	-webkit-column-width:202px;
	-moz-column-width:202px;
	-o-column-width:202px;
	-ms-column-width:202px;

	-webkit-column-gap:5px;
	-moz-column-gap:5px;
	-o-column-gap:5px;
	-ms-column-gap:5px;

	/*-webkit-column-rule:2px dashed #f00;
	-moz-column-rule:2px dashed #f00;
	-o-column-rule:2px dashed #f00;
	-ms-column-rule:2px dashed #f00;*/

	/*-webkit-column-count:5;
	-moz-column-count:5;
	-o-column-count:5;
	-ms-column-count:5;*/
}

.box {
	padding:10px 0 0 15px;
}

.pic {
	width: 165px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
}

.pic img {
	display: block;
	width: 165px;
	height: auto;
}