首页
所有分类
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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap 模态框（Modal）带参数传值实例
Aug 20 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
策略模式实现 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
KVM(1) Yolov5(1) 项目打包(2) Jmerte(1) 本地化存储(1) click(1) 自定义组件(1) vue-router-link(1) TimePickerView(1) Storage(1)
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP 开发环境配置（Zend Studio）
2010/04/28 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
三个思路解决laravel上传文件报错：413 Request Entity Too Large问题
2017/11/13 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js 内存释放问题
2010/04/25 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
理解Python中的With语句
2015/02/02 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python 类方法和实例方法(@classmethod)，静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Python的信号库Blinker用法详解
2020/12/31 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
德国古洛迷亚百货官网：GALERIA Kaufhof
2017/06/20 全球购物
兰蔻英国官网：Lancome英国
2019/04/30 全球购物
波兰最大的宠物用品网上商店：FERA.PL
2019/08/11 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
自主招生教师推荐信
2014/05/10 职场文书
离婚财产分配协议书
2014/10/21 职场文书
卖房协议书样本
2014/10/30 职场文书
二年级学生期末评语
2014/12/26 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技