封装函数

/*** 实现瀑布流布局*/
function waterFull(parent, child) {// 1. 父盒子居中// 1.1 获取所有的盒子var allBox = $(parent).getElementsByClassName(child);// 1.2 获取子盒子的宽度var boxWidth = allBox[0].offsetWidth;// 1.3 获取屏幕的宽度var screenW = document.documentElement.clientWidth;// 1.4 求出列数var cols = parseInt(screenW / boxWidth);var xyMargin = 16;// 2. 子盒子的定位// 2.1 定义高度数组var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;// 2.2 遍历子盒子for (var i = 0; i < allBox.length; i++) {// 2.2.1 求出每一个子盒子的高度boxHeight = allBox[i].offsetHeight + xyMargin;// 2.2.2 取出第一行盒子的高度放入高度数组if (i < cols) { // 第一行heightArr.push(boxHeight);allBox[i].style.position = "absolute";allBox[i].style.left = i * (boxWidth + xyMargin)+ 'px';allBox[i].style.top =  xyMargin + 'px';} else { // 剩余行// 1. 取出最矮的盒子高度minBoxHeight = _.min(heightArr);// 2. 求出最矮盒子对应的索引minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);// 3. 子盒子定位allBox[i].style.position = "absolute";allBox[i].style.left = minBoxIndex * (boxWidth + xyMargin)+ 'px';allBox[i].style.top = minBoxHeight +  xyMargin + 'px';// 4. 更新数组中的高度heightArr[minBoxIndex] += boxHeight;}}// 5. 更新父盒子的高度var parentHeight = allBox[allBox.length - 1].offsetTop + allBox[allBox.length - 1].offsetHeight;$(parent).style.height = parentHeight;
}
/*** 获取数组中最矮盒子高度的索引* @param arr* @param val* @returns {number}*/
function getMinBoxIndex(arr, val) {for(var i=0; i<arr.length; i++){if(arr[i] === val){return i;}}
}
function $(id) {return typeof id === "string" ? document.getElementById(id) : null;
}/*** 判断是否具备加载图片的条件，如果满足，自动填充*/
function checkWillLoadImage() {// 1. 获取最后一个盒子var allBox = document.getElementsByClassName("box");var lastBox = allBox[allBox.length - 1];// 2. 求出最后一个盒子自身高度的一半 + offsetTopvar lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;// 3. 求出屏幕的高度var screenW = document.body.clientHeight || document.documentElement.clientHeight;// 4. 求出页面偏离浏览器的高度var scrollTop = scroll().top;return lastBoxDis <= screenW + scrollTop;
}

知识点

瀑布流大概思想
① 每一个图片盒子的宽度是固定的,根据当前页面宽度,求出一行能有几列,进而求出最外层div的宽度进行设置并居中.
② 子盒子定位思想
Ⅰ. 第一行顺次排列,用一个数组存储他们的高度
Ⅱ. 第二行的第一张接在第一行最矮的一张下面,并将二者的高度和存入数组
Ⅲ.排好第一行后,将剩余所有图片按照Ⅱ进行排列
③ 便利所有数据,重复瀑布流
子绝父相并不是父盒子一定要是相对定位,只要不是static即可
当页面缩放的时候，重新进行瀑布流定位，并且将第一行的style定位清除掉
节流
① 当添加监听事件的时候，如果请求非常频繁。比如滚动，可以利用定时器进行节流。
② 设置一个定时器，每隔固定的事件进行进行一次操作。

运行效果

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="main"><div class="box"><div class="pic"><img src="data:images/img02.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img03.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img04.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img05.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img06.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img07.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img08.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img09.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img10.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img11.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img12.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img13.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img14.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img15.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img16.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img17.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img18.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img19.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img20.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img21.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img22.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img23.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img24.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img25.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img26.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img27.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img28.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img29.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img30.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img31.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img32.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img33.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img34.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img35.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img36.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img37.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img38.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img39.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="data:images/img40.jpg" alt=""></div></div>
</div><script src="js/UnderScore.js"></script>
<script src="./js/MyTools.js"></script>
<script src="js/index.js"></script>
</body>
</html>

index.css

*{margin: 0;padding: 0;border: none;
}img{vertical-align: top;
}html,body{width: 100%;height: 100%;
}/*子绝父相*/
*{margin: 0;padding: 0;border: none;
}img{vertical-align: top;
}html,body{width: 100%;height: 100%;
}/*子绝父相*/
#main{position: relative;
}.box{float: left;padding: 15px 0 0 15px;
}.pic{padding: 10px;border: 1px solid #cccccc;border-radius: 10px;
}
.box img{width: 165px;
}

index.js

window.addEventListener('load', function (ev) {var timer = null,timer1= null;// 1. 实现瀑布流布局waterFull('main', 'box');// 2. 加载数据window.addEventListener('scroll',function (ev1) {clearInterval(timer1);timer1 = setInterval(function () {if (checkWillLoadNewBox()){ // 结果为真// 2.1 假数据var dataArr = [{"src":"img02.jpg"},{"src":"img03.jpg"},{"src":"img05.jpg"},{"src":"img04.jpg"},{"src":"img15.jpg"},{"src":"img06.jpg"},{"src":"img08.jpg"},{"src":"img29.jpg"},{"src":"img30.jpg"},{"src":"img12.jpg"}];// 2.2 遍历数据for (var i = 0; i < dataArr.length; i++) {var newBox = document.createElement('div');newBox.className = 'box';myTool.$('main').appendChild(newBox);var newPic = document.createElement('div');newPic.className = 'pic';newBox.appendChild(newPic);var newImg = document.createElement('Img');newImg.src = 'images/'+dataArr[i].src;newPic.appendChild(newImg);}// 2.3 重新进行瀑布流布局waterFull('main', 'box');}},200);});// 3. 页面尺寸发生改变重新布局window.addEventListener('resize',function (ev1) {clearInterval(timer);timer = setInterval(function () {waterFull('main', 'box');}, 200);})
});/*** 实现瀑布流布局* @param {string}parent 父盒子id* @param {string}child 子盒子class*/
function waterFull(parent, child) {// 1. 父盒子居中// 1.1 获取标签var allBox = myTool.$(parent).getElementsByClassName(child);// 1.2 获取其中一个子盒子的宽度var boxWidth = allBox[0].offsetWidth;// 1.3 获取文档的宽度var screenW = document.documentElement.clientWidth || document.body.clientWidth;// 1.4 求出列数var cols = parseInt(screenW / boxWidth);// 1.5 让父盒子剧中myTool.$(parent).style.width = cols * boxWidth + 'px';myTool.$(parent).style.margin = '0 auto';// 2. 子盒子定位// 2.1 定义变量var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;// 2.2 遍历所有盒子for (var i = 0; i < allBox.length; i++) {boxHeight = allBox[i].offsetHeight;// 2.3 判断if (i < cols) { // 第一行heightArr.push(boxHeight);allBox[i].style='';} else { // 剩余行// 2.4 取出数组中最矮盒子的高度minBoxHeight = _.min(heightArr);// 2.5 取出最矮盒子在数组中的索引minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);// 2.6 剩余子盒子定位allBox[i].style.position = 'absolute';allBox[i].style.left = minBoxIndex * boxWidth + 'px';allBox[i].style.top = minBoxHeight + 'px';// 2.7 更新高度heightArr[minBoxIndex] += boxHeight;}}
}function getMinBoxIndex(arr, val) {for (var i = 0; i < arr.length; i++) {if (arr[i] === val) {return i;}}
}/**郇凯* 判断页面高度+页面划出高度 与 最后一张图片高度一半+距页面上方距离 的大小* 如果大于,图片出现* @returns {boolean} 返回为真为假*/
function checkWillLoadNewBox(){// 1 获取最后的盒子var allBox = myTool.$('main').getElementsByClassName('box');var lastBox = allBox[allBox.length - 1];// 2 求最后盒子高度的一半var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;// 3. 求出页面高度var screenH = document.documentElement.clientHeight || document.body.clientHeight;// 4. 求出页面滚出浏览器高度var scrollTopH = myTool.scroll().top;// 5. 返回结果return lastBoxDis <= screenH + scrollTopH;
}

Javascript特效：瀑布流相关推荐

html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
PHP jquery瀑布流特效源码
PHP jquery实现瀑布流布局,其实一个核心的原理是,当滚动到最底部以上100像素时, 加载新内容.为了保证大家能够充分理解瀑布流的实现原理,就尽量保证了实例的简单性,这款瀑布流仅仅使用了php数 ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
JavaScript实现自适应宽度的瀑布流
摘要: 主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动 ...
JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录瀑布流的定义一.实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么? 1.琳琅满目:整 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
JavaScript 瀑布流简单实现(基于Jquery)
HTML代码片段 <div class="main"><div class="main-items"><div class=&qu ...
用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

Javascript特效：瀑布流

封装函数

知识点

运行效果

代码

Javascript特效：瀑布流相关推荐

最新文章

热门文章