首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现无限瀑布流实例方法

Posted in Javascript onSeptember 16, 2019

瀑布流

是一种常见的网页布局方式，在许多网站中我们都能看到“瀑布流”的效果，其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布，

故将这种布局方式称为瀑布流。

生活中瀑布流实例：

花瓣网

js实现无限瀑布流实例方法

在css中我们学习过使用Multi-columns来实现瀑布流的效果

通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。

现在，我来介绍一下如何通过js方式来实现瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .cont{
      margin: 0 auto;
      position: relative;
    }
    .box{
      float: left;
      padding: 6px;
    }
    .imgbox{
      border: 1px black solid;
      border-radius: 6px;
      padding: 6px;
    }
    .imgbox img{
      width: 200px;
      display: block;
    }
  </style>
  <script>
     onload = function () {
       new Waterfall();
     };
     function Waterfall() {
       this.ocont = document.querySelector(".cont");
       this.abox = document.querySelectorAll(".box");
       this.heightArr = [];
       this.init();

       //w1准备数据
       this.data = this.load();
       this.addScroll();
     }
     Waterfall.prototype.load = function(){
       return [{img:"images/1.jpg"},{img:"images/2.jpg"},{img:"images/3.jpg"},{img:"images/4.jpg"},{img:"images/5.jpg"},{img:"images/6.jpg"},{img:"images/7.jpg"},{img:"images/8.jpg"},{img:"images/9.jpg"},{img:"images/10.jpg"},]
     };
     Waterfall.prototype.addScroll = function(){
       var that = this;
       onscroll = function () {
         if (that.isBottom()){
           that.data.forEach(val=>{
             var img = document.createElement("img");
             img.src = val.img;
             var imgbox = document.createElement("div");
             imgbox.className = "imgbox";
             var box = document.createElement("div");
             box.className = "box";
             imgbox.appendChild(img);
             box.appendChild(imgbox);
             that.ocont.appendChild(box);
           });
           that.abox = document.querySelectorAll(".box");
           that.heightArr = [];
           that.firstLine();
           that.otherLine();
         }
       }
     };
     Waterfall.prototype.isBottom = function(){
       var clientH = document.documentElement.clientHeight;
       var scrollT = document.documentElement.scrollTop;
       var scrollH = document.documentElement.scrollHeight;
       if (clientH + scrollT >= scrollH-200){
         return true;
       }else{
         return false;
       }
     };
     Waterfall.prototype.init = function () {
       this.num = Math.floor(document.documentElement.clientWidth/this.abox[0].offsetWidth);
       this.ocont.style.width = this.num*this.abox[0].offsetWidth+"px";
       //区分第一行
       this.firstLine();
       //区分最后一行
       this.otherLine();
     };
     Waterfall.prototype.firstLine = function () {
       for (var i=0;i<this.num;i++){
         this.heightArr.push(this.abox[i].offsetHeight);
       }
     };
     Waterfall.prototype.otherLine = function () {
       for (var i=this.num;i<this.abox.length;i++){
         var min = getMin(this.heightArr);
         var minIndex = this.heightArr.indexOf(min);
         //设置定位，left，top
         this.abox[i].style.position = "absolute";
         this.abox[i].style.top = min + "px";
         this.abox[i].style.left = minIndex*this.abox[0].offsetWidth+"px";
         this.heightArr[minIndex] += this.abox[i].offsetHeight;
       }
     };
     function getMin(arr) {
       var myarr = [];
       arr.forEach(val =>{
         myarr.push(val);
       });
       return myarr.sort((a,b)=>a-b)[0];
     }
  </script>
</head>
<body>
<div class="cont">
  <div class="box">
  <div class="imgbox">
    <img src="images/4.jpg" alt="">
  </div>
</div>
  <div class="box">
    <div class="imgbox">
      <img src="images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/10.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/4.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/10.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/10.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/10.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/3.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/1.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/5.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/7.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/8.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/9.jpg" alt="">
    </div>
  </div>
  <div class="box">
    <div class="imgbox">
      <img src="images/10.jpg" alt="">
    </div>
  </div>
</div>
</body>
</html>

以上就是本次介绍的关于js实现无限瀑布流的全部知识点内容，感谢大家的学习和对三水点靠木的支持。

js实现无限瀑布流实例方法

- Author -

本山耀司

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
策略模式实现 Vue 动态表单验证的方法
Sep 16 #Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
Vue实现滑动拼图验证码功能
Sep 15 #Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 #Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 #Javascript
layui使用label标签的方法
Sep 14 #Javascript
使用layui定义一个模块并使用的例子
Sep 14 #Javascript
意大利购物网站(128) 南非购物网站(8) 肯尼亚购物网站(2) 葡萄牙购物网站(13) 瑞典购物网站(55) 芬兰购物网站(10) 挪威购物网站(7) 荷兰购物网站(99) 比利时购物网站(33) 阿根廷购物网站(9)
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
小学体育教学反思
2014/01/31 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
主要负责人任命书
2014/06/06 职场文书
教务处干事工作总结
2015/08/14 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Java使用HttpClient实现文件下载
2022/08/14 Java/Android