首页
所有分类
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 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
i5 10400(1) 窗口函数(3) win10(43) win11(40) 分析统计(1) ipad(1) Tomcat(18) 排名(1) 速龙(1) redis shake(1)
You might like
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
javaScript语法总结
2016/11/25 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Python安装Imaging报错：The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
详解用python写一个抽奖程序
2019/05/10 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python解析json代码实例解析
2019/11/25 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
python使用正则表达式匹配txt特定字符串（有换行）
2020/12/09 Python
美国领先的个性化礼品商城：Personalization Mall
2019/07/27 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
早会主持词
2014/03/17 职场文书
房地产端午节活动方案
2014/08/24 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
首席执行官观后感
2015/06/03 职场文书
python元组打包和解包过程详解
2021/08/02 Python