首页
所有分类
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 12 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
深入探究AngularJs之$scope对象（作用域）
Jul 20 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
Nuxt的路由配置和参数传递方式
Nov 06 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
智利购物网站(5) 捷克购物网站(26) 沙特阿拉伯购物网站(9) 波兰购物网站(52) 斯洛伐克购物网站(7) 奥地利购物网站(28) 卡塔尔购物网站(3) 秘鲁购物网站(1) 新西兰购物网站(42) 菲律宾购物网站(13)
You might like
使用数据库保存session的方法
2006/10/09 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Django框架安装方法图文详解
2019/11/04 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
win10安装python3.6的常见问题
2020/07/01 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
中学家长会邀请函
2014/02/03 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年人事部工作总结
2014/12/03 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
JavaScript实现登录窗体
2021/06/22 Javascript