现在网页中需要翻页的列表,好多都已经改为瀑布流了。所以这个思路还是特别重要的

HTML

Css

页面

因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成

js部分 思路注释

<script>
// 1.获取父容器的宽度 获取子容器的宽度 算出一列放多少个,边距
// 2.通过计算盒子的高度,布局方法
// 3.瀑布流启动
//获取父容器
let itemBox=document.getElementById('itembox')
//父容器宽度
let iBoxW=itemBox.offsetWidth;
// 子容器和宽度
let item=document.getElementsByClassName('item')
let itemW=item[0].offsetWidth
//列数
const rowNum=Math.floor(iBoxW/itemW)
//间距
const distents=Math.floor((iBoxW-itemW*rowNum)/rowNum) // console.log(distents,rowNum)
// 每个图片的left=列数*(图片大小+间距)
//每个图片的top值为当前高度最低的top
//保存每列的高度、索引就是我们放的列数,值就是top
let arr=[] // 实现布局
for (let i=0;i<item.length;i++){
// 第一排top为0
if (i<rowNum){
item[i].style.left=i*(itemW+distents)+'px';
item[i].style.top='0px'
arr[i]=item[i].offsetHeight;
}
// 第二 三 四。。。。排
else {
let Minarr=MinArr(arr)
item[i].style.left=Minarr.index*(itemW+distents)+'px';
item[i].style.top=Minarr.min+'px'
console.log(item[i].offsetHeight,arr)
//更新数组高度
arr[Minarr.index]+=item[i].offsetHeight
}
} let json=['bl1.jpg','bl5.jpg','bl6.jpg','bl7.jpg','bl8.jpg','bl4.jpg','bl3.jpg','bl2.jpg','CJD2.jpg','CJD4.jpg','CJD1.jpg','CJD3.jpg']
console.log(MinArr(arr),arr)
//启动瀑布流
//滚动事件
window.onscroll=function () {
//浏览器可视高度
let toH=window.innerHeight
//浏览器滚动超出的高度
let doH=window.pageYOffset
let Minarr=MinArr(arr) //当这2个值+起来>最小列宽度时加载数据
if (toH+doH>Minarr.min){
for (let i=0;i<json.length;i++){
//创建元素
let div=document.createElement('div')
div.className='item'
let img=document.createElement('img')
img.src='images/'+json[i]
//设置TOP left
// 每个图片的left=列数*(图片大小+间距)
//每个图片的top值为当前高度最低的top
div.style.top=Minarr.min+'px'
div.style.left = Minarr.index*(itemW+distents)+'px';
//添加
div.appendChild(img)
itemBox.appendChild(div)
//保存每列的高度、索引就是我们放的列数,值就是top
arr[Minarr.index]+=div.offsetHeight
// 重新排序
Minarr=MinArr(arr)
} //后期用AJAX 改变JSOn的值
}
} //最小高度和索引
function MinArr(arr) {
let mArr={}
mArr.min=arr[0]
mArr.index=0;
for (let i=1;i<arr.length;i++){
if (mArr.min>arr[i]){
mArr.min=arr[i]
mArr.index=i;
}
}
return mArr
} </script>

  

疑问

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

我开始用获取body的高度时候始终都是0 原因是因为绝对定位不能将父容器撑开 产生了BFC 解决办法。。。。还不知道  留个疑惑吧

JavaScript—瀑布流的更多相关文章

  1. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  2. javascript瀑布流

    哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...

  3. JavaScript瀑布流代码

    function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt( ...

  4. web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  5. JavaScript:实现瀑布流

    一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...

  6. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  7. JavaScript中作用域回顾(避免使用全局变量)(瀑布流的实现)(scroll事件)以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  8. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  9. JavaScript——原生js实现瀑布流

    瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...

随机推荐

  1. P1037 在霍格沃茨找零钱

    转跳点:

  2. centos7上安装mysql8

    话不多说仍然是更换虚拟机的系列安装. 一.首先下载最先版的mysql.到官网下载https://dev.mysql.com/downloads/file/?id=477146 下载后上传linux到相 ...

  3. JS - 获取任意一天的0点和23:59:59时间

    转载自 https://www.cnblogs.com/sk-3/archive/2019/07/23/11232750.html 使用了setHours() 方法 setHours() 方法用于设置 ...

  4. Java8集合框架——LinkedHashSet源码分析

    本文的目录结构如下: 一.LinkedHashSet 的 Javadoc 文档注释和简要说明 二.LinkedHashSet 的内部实现:构造函数 三.LinkedHashSet 的 add 操作和 ...

  5. 提交作业 C语言I作业11

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/10127 我在这个课程的目标 ...

  6. 控制台连接oracle11g报ORA-12560异常

    oracle11g R2 64bit oracleClient 11.2 32bit PL/SQL Developer 11.0.2 32bit 今天发现了一个奇怪的现象,如图: 后来发现机器上既有s ...

  7. CF1141D Colored Boots

    There are n left boots and n right boots. Each boot has a color which is denoted as a lowercase Lati ...

  8. ArryList的使用方法(基础使用-将来会不断添加)

    转自:http://www.cnblogs.com/ysz12300/p/5595907.html 引入ArryList的方法->命名空间:using System.Collections; A ...

  9. Android-寒假学习-阶段总结(20集)-口算测试APP

    说在前面: 1.视频教程:https://www.bilibili.com/video/av60445113/?spm_id_from=333.788.videocard.0 2.老师的源码:http ...

  10. UVA - 1612 Guess (猜名次)(贪心)

    题意:有n(n<=16384)位选手参加编程比赛.比赛有3道题目,每个选手的每道题目都有一个评测之前的预得分(这个分数和选手提交程序的时间相关,提交得越早,预得分越大).接下来是系统测试.如果某 ...