js实现瀑布流布局（无限加载）

2024-09-27 10:34:46

本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下

1.实现瀑布流布局思路

准备好数据之后

. 绑定滚动事件
. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）
. 加载新数据，渲染新页面
.重新执行瀑布流效果

2.代码（更换图片路径之后可直接运行）

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .cont{margin: 0 auto;background: #ccc;position: relative;}
 .cont::after{content: "";display: block;clear: both;}

 .box{float: left;padding: 6px;}

 .imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}

 .imgbox img{width: 200px;display: block;}
 </style>
 <script src="data/data.js"></script>
 <script>
 // W1. 准备数据
 // W2. 绑定滚动事件
  // W3. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）
  // W4. 加载新数据，渲染新页面
  // W5. 重新执行瀑布流效果
 onload = function(){
  new Waterfall;
 }
 class Waterfall{
  constructor(){
  // 1.选择元素
  this.box = document.querySelectorAll(".box");
  this.cont = document.querySelector(".cont");
  this.clientH = document.documentElement.clientHeight;
  this.heightArr = [];
  // 2.补全布局
  this.init();
  this.addEvent();
  }
  addEvent(){
  var that = this;
  onscroll = function(){
   var scrollT = document.documentElement.scrollTop;
   if(that.clientH + scrollT > that.scrollH-300){
   that.render()
   }
  }
  }
  render(){
  for(var i=0;i<data.length;i++){
   var img = document.createElement("img")
   img.src = data[i].src;
   var imgbox = document.createElement("div")
   imgbox.className = "imgbox";
   var box = document.createElement("div")
   box.className = "box";
   imgbox.appendChild(img);
   box.appendChild(imgbox);
   this.cont.appendChild(box);
  }
  // 初始化所有
  this.box = document.querySelectorAll(".box");
  this.heightArr = [];
  // 重新渲染瀑布流结构
  this.firstLine();
  this.otherLine();
  }
  init(){
  // 计算一行最多能放几个，再计算最大宽度
  this.clientW = document.documentElement.clientWidth;
  this.boxW = this.box[0].offsetWidth;
  this.maxNum = parseInt(this.clientW / this.boxW)
  this.cont.style.width = this.boxW * this.maxNum + "px";

  // 3. 区分第一行
  this.firstLine()
  // 4. 区分其他行
  this.otherLine();
  }
  firstLine(){
  // 5. 获取所有元素的高度，存起来
  for(var i=0;i<this.maxNum;i++){
   this.heightArr.push(this.box[i].offsetHeight);
  }
  }
  otherLine(){
  for(var i=this.maxNum;i<this.box.length;i++){
   // 6. 拿到第一行所有的高度
   // console.log(this.heightArr)
   // 计算最小值和最小值的索引
   // var min = getMin(this.heightArr);
   // var min = Math.min.apply(null,this.heightArr);
   var min = Math.min(...this.heightArr);
   var minIndex = this.heightArr.indexOf(min);
   // console.log(minIndex);
   // 7. 设置元素的定位
   this.box[i].style.position = "absolute";
   // 8. 设置元素的top和left
   this.box[i].style.top = min + "px";
   this.box[i].style.left = minIndex * this.boxW + "px";
   // 9. 修改最小值
   this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  this.scrollH = document.documentElement.scrollHeight;
  }
 }
 function getMin(arr){
  // 先对数组进行截取（为了深拷贝）
  // 然后对截取出的新数组排序
  // 找第0位
  // 返回出去
  return arr.slice(0).sort((a,b)=>a-b)[0];
 }

 </script>
</head>
<body>
 <div class="cont">
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div class="box">
  <div class="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

解析瀑布流布局:JS+绝对定位的实现

绝对定位方式的瀑布流布局: 一.布局 1.包围块框的容器: 复制代码代码如下: <div id="main"> ... ...<div> 2.一个块框: 复制代码代码如下: <div class="pin"> <div class="box"> <img src="./images/g (1).jpg"/> </div>
原生js实现瀑布流布局

用js实现瀑布流布局以及通过模拟的数据加载图片,已标记注释效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>瀑布流布局-JS实现</title> </head> <style type="text/css"> *{ margin: 0; paddin
微信小程序通过js实现瀑布流布局详解

前言瀑布流 - 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接.如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版.但column-count: 2是左右两列排版,如果碰巧出现左边累计高度过多大于右边累计高度的话,右边会出现大片空白区域.点击前往 js(推荐): 判断左右两边的累计高度,那边的高度小,便往那边添加(需要动态获取节点元素的高度进行计算).下面用的就是此种方法: 准备工作我们需要用到 a
原生JS实现响应式瀑布流布局

原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
JavaScript瀑布流布局实现代码

先说一下什么是瀑布流布局. 就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站都采用这种瀑布流布局,如蘑菇街.美丽说等等. 首先要实现它就要明白它是怎样排列的. 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的.. 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的. 首先实现框架. <div id = "main"> <div class = "box"> <div class = &quo
原生JS实现美图瀑布流布局赏析

自pinterest网站爆红以来,国内一度掀起"仿PIN"狂潮,诸如花瓣.蘑菇街等等.正是如此,"瀑布流"式布局受到广大网民的青睐.众多知名JS库,也相继出现"瀑布流"布局插件,譬如jQuery的Masonry插件.KISSY的waterfall插件等.今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的"瀑布流"布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获. 1
纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="
JS实现瀑布流布局

本文实例为大家分享了JS实现瀑布流布局展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="wallpoll.js"></script> <link r
javascript瀑布流布局实现方法详解

本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-
详解javascript实现瀑布流绝对式布局

瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流. 一.绝对式布局: JS实现原理其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元

js实现瀑布流布局（无限加载）

相关推荐

随机推荐