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

来源：互联网发布：sougou输入法windows版编辑：程序博客网时间：2024/05/01 10:46

实现的最终效果如下：

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

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");//获取最后一个盒子和页面顶部的距离用offsetTopvar 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下的一级divvar $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;}

0 0