【前言】
近期开始讲到高阶JS，为了提高学习兴趣，再讲点特效。本次简单总结下JS实现瀑布流特效
样式特点：
（1）呈现出等宽不等高，参差不齐排列
（2）拖动滚动条时会不断加载新数据，甚至可以无限往下拖动，一直拖一直加载新数据
实现方案：
①原生JS；②jQuery库；③CSS3的多栏布局
【主体】
直接上代码，具体意思里面有注释，注意文件位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
/*代码初始化*/
*{
margin: 0;
padding: 0;
}
/*代码主体*/
#main{
position: relative;
margin: 0 auto;
}
/*砖头缝隙*/
.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;
}
</style>
<link rel="stylesheet" type="text/css" href="img/animate.css">
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/01.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg">
</div>
</div>
</div>
<script type="text/javascript">
var dataList = {
"data":[
{"src":"01.jpg"},
{"src":"02.jpg"},
{"src":"03.jpg"},
{"src":"04.jpg"},
{"src":"05.jpg"},
{"src":"06.jpg"},
{"src":"07.jpg"},
{"src":"08.jpg"}
]
}
window.onload = function(){
waterFall();
window.onscroll = function(){
change();
}
}
function waterFall(){
//1、获取box盒子
var main = document.getElementById("main");
var box = main.getElementsByClassName("box");
//2、计算列数（页面宽/box宽）
var boxWidth = box[0].offsetWidth;//盒子宽度
var docWidth = document.documentElement.clientWidth;//页面宽度
var cols = Math.floor(docWidth/boxWidth);
// 3、设置main宽度
main.style.width = boxWidth*cols+"px";
// 4、对比高度
var boxArray = [];//存放每一列高度
for(var i=0;i<box.length;i++){
if(i<cols){
boxArray.push(box[i].offsetHeight);
}else{
// 5、计算最矮高度
var minH = Math.min.apply(null,boxArray);//最矮高度
var MinHindex = boxArray.indexOf(minH);
//6、设置下一行图片位置
box[i].style.position = "absolute";
box[i].style.top = minH + "px";
//左侧计算boxbox[i].style.left = boxWidth*MinHindex + "px";
box[i].style.left = box[MinHindex].offsetLeft + "px";
// 7、添加完后，将其高度做改变
boxArray[MinHindex] += box[i].offsetHeight;
}
}
}
//检测是否具备记载条件
function change(){
//判断是否具备加载条件
//1、获取box盒子
var main = document.getElementById("main");
var box = main.getElementsByClassName("box");
// 2、获取最后一个块距离父级元素main的顶部距离
var lastBoxH = box[box.length-1].offsetTop;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.body.clientHeight || document.documentElement.clientHeight;
if(scrollTop+height>lastBoxH){
//将数据块放到页面里
// (1)遍历数据
for(var i=0;i<dataList.data.length;i++){
// (2)创建元素节点
var newBox = document.createElement("div");
// newBox.setAttribute("class","box");
newBox.className = "box animated slideInUp";
main.appendChild(newBox);
var newPic = document.createElement("div");
newPic.className = "pic";
newBox.appendChild(newPic);
var newImg = document.createElement("img");
newImg.src = "img/"+dataList.data[i].src;
newPic.appendChild(newImg);
}
//新增后再次瀑布流
waterFall();
}
}
</script>
</body>
</html>
.
相关推荐
原生JavaScript实现瀑布流效果，不依赖任何第三方库，可以更好地控制性能和兼容性，对于开发者来说是一次有趣的挑战。 首先，我们需要理解瀑布流的核心原理。瀑布流布局的关键在于计算每个元素的宽度和位置，使它们...
总结，原生JS实现的瀑布流布局和无限加载结合了DOM操作、事件监听、布局计算等多个技术点。通过合理的优化策略，可以实现高效且用户体验良好的页面布局效果。在实际开发中，可以根据项目需求进行调整和定制，以满足...
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
通过阅读和理解这些代码，我们可以学习如何在没有第三方库的情况下，如jQuery或Modernizr，使用原生JavaScript实现瀑布流布局，并保证在IE8上的兼容性。 总的来说，实现瀑布流布局涉及JavaScript的基本语法、DOM...
【标题】原生JS简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 瀑布流布局，也称为Masonry布局，是一种网页布局样式，其中各元素可以不等宽，但垂直对齐，形成类似瀑布的效果。这种布局常用于图片展示网站，如...
实现瀑布流布局的JavaScript方法主要有两种：一是使用原生JavaScript操作DOM，二是利用第三方库如Masonry或Isotope等。 在使用原生JavaScript实现瀑布流的过程中，我们通常需要编写逻辑来计算每行元素的高度，并对...
在原生JS实现瀑布流插件中，使用到了几个DOM属性，比如offsetHeight、offsetWidth、clientHeight和clientWidth等。offsetHeight属性用于获取元素的高度，包括元素的垂直内边距和边框；clientHeight是元素内容区域的...
瀑布流布局，又称Masonry...总之，JS瀑布流效果是一种利用JavaScript动态调整元素布局的技术，通过合理地分配和排列元素，实现了视觉上引人入胜的页面展示。掌握这一技术，对于提升网页设计的用户体验有着重要的作用。
在纯原生JavaScript实现无限瀑布流的过程中，主要涉及到以下几个关键知识点： 1. **元素尺寸计算**：瀑布流的关键在于元素的宽度和高度计算。由于元素的宽度通常是固定的，高度则需要根据相邻元素的位置进行动态...
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
在没有JavaScript的情况下，这种布局很难通过CSS完全实现，因此，通常会利用JavaScript来动态调整元素的位置，以达到理想的瀑布流效果。 在JavaScript中实现瀑布流布局，主要涉及以下几个关键知识点： 1. **DOM...
原生JavaScript实现瀑布流主要依赖于DOM操作，通过对元素的尺寸和位置进行计算和设置来达到瀑布流的布局效果。从给定文件的内容来看，主要分为以下几个步骤： - **页面结构准备**：使用HTML定义内容的容器和图片...
但CSS3中没有直接的原生方法实现这一点，因此，这个"纯CSS3"实现可能涉及了一些技巧，如使用伪元素、负margin等，以模拟瀑布流的视觉效果。 综上所述，这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和...
可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的...
实现瀑布流布局，JavaScript（简称js）扮演了关键角色。JavaScript允许我们动态地调整元素的位置，以适应不同的屏幕尺寸和内容数量。在描述中提到的“logo图片”和“图片”，在瀑布流布局中通常作为展示元素，它们的...
在原生JavaScript中实现瀑布流布局，主要涉及到以下几个关键知识点： 1. **DOM操作**：JavaScript是处理DOM（Document Object Model）的主要工具，我们需要获取页面中的图片元素，并在适当的时候将它们插入到瀑布流...