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

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. HDU - 1087 Super Jumping! Jumping! Jumping!(dp)

    题意:从起点依次跳跃带有数字的点直到终点,要求跳跃点上的数字严格递增,问跳跃点的最大数字和. 分析: 1.若之前的点比该点数字小,则可进行状态转移,dp[i] = max(dp[i], dp[j] + ...

  2. mvn 编译报错mavn sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested targ

    mavn 编译报错: mavn sun.security.validator.ValidatorException: PKIX path building failed: sun.security.p ...

  3. sourceTree 生成公钥和私钥 然后拉项目代码

    第一步 用sourceTree生成公钥pub和私钥文件ppk    打开sourceTree -> 工具 -> 创建或导入ssh密钥 -> 点击generate -> 上面会显 ...

  4. cf 543 D. Road Improvement

    (懒得想了,,又是DP) #include<bits/stdc++.h> #define N 200005 #define LL long long #define inf 0x3f3f3 ...

  5. Java关键字与标识符

    什么是关键字? Java语言赋予特定含义的单词被称为关键字,比如在HelloWorld中的class.public.static.void. 关键字的特点: 完全小写的字母. 在增强版的记事本当中(例 ...

  6. 046-unset对静态变量无法销毁

    <?php function digui() { static $count = 0; echo $count; $count++; unset($count); } digui(); digu ...

  7. 116-PHP调用类成员函数

    <?php class ren{ //定义人类 public function walk(){ //定义人类的成员方法 echo '我会走路.'; } } $ren=new ren(); //实 ...

  8. BurpSuite详解

    转载自:http://www.nxadmin.com/tools/689.html 本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其 ...

  9. Android file内部存储

    通过file=openFileOutput()获得,将数据存储在data/data/+包名+files下面. 代码如下: MainActivity.java: import android.os.Bu ...

  10. 17. react redux的中间件

    1. redux 数据流程图 View 会派发一个 Action Action 通过 Dispatch 方法派发给 Store Store 接收到 Action 连同之前的 State 发给  Red ...