首页
所有分类
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实际应用：innerHTMl和确认提示的使用
Jun 22 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
js自定义回调函数
Dec 13 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
R601SW(1) ETON(1) S900(1) 沃尔沃(1) 放大器(1) 矿石收音机(1) 电子管(5) E1-XM(1) 接收机(2) DSP(2)
You might like
PHP下利用shell后台运行PHP脚本，并获取该脚本的Process ID的代码
2011/09/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
老生常谈js中的MVC
2017/07/25 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python中optparser库用法实例详解
2018/01/26 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
求职自荐信
2013/12/14 职场文书
网络技术专业求职信
2014/07/13 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
运动会报道稿300字
2014/10/02 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
九年级历史教学反思
2016/02/19 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python
python三子棋游戏
2022/05/04 Python