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

落日映苍穹つ 2022-08-20 14:24 249阅读 0赞

实现的最终效果如下：

![Center][]

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

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">
    	
    </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;
    }

[Center]: /images/20220731/5d6e2494827a43b390a6f5448d974f22.png