-
2021-12-04 12:41:37
图片瀑布流
首先，什么是图片瀑布流？
如下图，现实中我们的图片宽高大小不是总是一致的，但是在既不想过分损失图片质量情况下，又能最大化利用空间，该怎么实现呢，一般有两种方案
一种是宽固定，高度自适应（每一列的宽度都是一样的，下图是三列），如下图：
___________________图片来源于百度，侵权请告知！_________________一种是高固定，宽自适应（每一行高都是一样的，下图是三行），如下图：
很早之前就知道了图片瀑布流，但是一直没有想着去实现一个，今天一起来实现一下吧，锻炼我们的逻辑思维（以宽固定为例）
因为整体逻辑比较简单，所以直接在代码注释中解释了 ^ _ ^
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #999; } * { margin: 0; padding: 0; } .all { background-color: rgba(255, 255, 255, 0.5); width: 1090px;/* 父元素的宽固定*/ margin: auto; margin-top: 20px;/*整体到顶部的距离，为了好看点*/ font-size: 0;/*消除图片间隙*/ position: relative;/*给父级一个绝对定位，这样子元素就可以相对他定位*/ } .smallimg { position: absolute;/*子元素开启相对定位*/ width: 200px;/*子元素的宽固定为200*/ } </style> </head> <body> <div class="all"> </div> <script> //定义一个img数组，模仿图片数据源 var img = ["01.jpg", "02.jpg", "03.jpg", "person.jpg", "pyy.jpg", "06.jpg", "03.jpg", "04.png", "05.jpg", "06.jpg"]; var all = document.getElementsByClassName("all")[0];//先获取到瀑布流的父级元素 var num = 5;//确定一行可以放多少个 var total = 50;//初始要生成的图片数量 //初始创建50张图片 createEle(total); window.onload = function(ev) { //给50张图片设置定位 setPosition(0); //获取页面的高并赋值 var maxHeight = getMaxHeight(total);//获取创建完图片后的子元素的 总高（最上面的图片top到最下面的图片bottom），最大是多少，防止父级包不住 all.style.height = maxHeight + "px";//把总高赋值给父级 } function createEle(newTotal) { //创建对象函数 for (var i = newTotal - 50; i < newTotal; i++) { var image = document.createElement("img"); image.src = "images/" + img[Math.floor((Math.random() * num))]; image.setAttribute("class", "smallimg"); //image.className = "smalling" all.appendChild(image); } } //关键函数，给图片设置定位 function setPosition(start) { //设置图片定位函数 for (var i = start; i < all.children.length; i++) { //因为子元素都是相对定位，所以设置偏移量就可以改变位置 //i % num 表示的是 一行最多只放五个，现在这个图片是这一行的第 i % 5 个，num等于5不变 // 知道是第几，那么左边的偏移量就是单个偏移的多少倍，比如第一个偏移 1 * 210 ，第二个偏移 2 * 210…… all.children[i].style.left = ((i % num) * 210) + "px"; // 当i > 5了，表示现在开始是第二行以后了，这时高度也高不断变化了，因为宽虽然固定，但是每个图片的高度不是一样的，要进行计算，再确定当前图片的应处于的高度 if (i >= num) { //all.children[(i - num)].offsetHeight这个意思其实就是获取当前这个位置的 上面那张图片的高度 // all.children[(i - num)].offsetTop这个意思是获取当前这个位置的 上面那张图片距离顶部的距离 //再加上 间距10 就是应有的高度了 all.children[i].style.top = (all.children[(i - num)].offsetHeight + 10 + all.children[(i - num)].offsetTop) + "px"; } else { //如果是第一行，那么高度就都是距离父级10px all.children[i].style.top = "10px"; } } } function getMaxHeight(newTotal) { //在创建完所有图片后获取all的最后十个子元素，并比较其自身高与距离顶部的高 var max = 0 for (var i = newTotal - 10; i < newTotal; i++) { // all.children[i].offsetTop 当前图片距离父级顶部的距离 //all.children[i].offsetHeight当前图片的高度 var temp = all.children[i].offsetTop + all.children[i].offsetHeight if (temp > max) {//在最后十张图片中，不断更新最大值 max = temp } } return max } this.addEventListener("scroll", function(evt) { // document.documentElement.clientHeight可视区的高度 // document.body.offsetHeight 是body的总高度 if (document.documentElement.clientHeight + this.scrollY >= document.body.offsetHeight - 20) {//经典滚动事件中的判断方法 total = total + 50;//追加50张图片 createEle(total);//再创建50张图片 setPosition(total - 50)//设置后面50张的位置 all.style.height = getMaxHeight(total) + "px"; } }); </script> </body> </html>对于上我的理解，大家肯定有点晕，也不知道我说的是什么，那么就配合下面这个图一起理解吧！
瀑布流逻辑还是比较简单的，但是可以很好的锻炼我们的逻辑思维和加强对于js中的各种坐标的理解
有问题请私信哈！@ _ @
看都看完了，一键三连再走呗，嘿嘿嘿😁
更多相关内容 -
js精彩图片瀑布流布局
2019-09-01 17:18:13js精彩图片瀑布流布局 -
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020-10-15 18:53:51主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 -
图片瀑布流
2016-12-18 21:59:38分别用js、jquery、css3写的瀑布流 -
jQuery响应式图片瀑布流布局代码.zip
2019-05-24 05:24:06jQuery响应式图片瀑布流布局代码基于jquery-1.8.3.min.js制作，响应式设计，无限加载。 -
jQuery仿百度图片瀑布流代码.zip
2019-07-04 21:24:22jQuery仿百度图片瀑布流代码是一款可自适应浏览器宽度的响应式图片网格布局代码。 -
flowLayout-Android:自定义流式布局实现文字和图片瀑布流效果
2021-05-03 17:31:26#文字瀑布流和图片瀑布流的实现 -用自定义的布局（流式布局）来实现瀑布流的效果 #先看效果图 ##文字瀑布流 ###文字瀑布流特点： 可以实现textview控件的随机排布。每个textview的背景色都不同。 每次点击后，圆形... -
swift-瀑布流网络图片瀑布流
2019-08-15 07:39:34瀑布流，网络图片瀑布流 -
不规则图片 瀑布流原理的分析应用
2020-09-22 14:21:51在项目中遇到了不规则图片墙的布局问题 分析原理如下边所示 -
安卓图片瀑布流的实现方法
2020-07-13 16:07:31该文件为安卓图片瀑布流的方法，使排面更加精致，乱中有序。欢迎读者留言交流，有不对的地方请谅解，谢谢谢谢！ -
图片瀑布流 jquery
2018-02-24 12:32:35图片瀑布流 jquery 图片瀑布流 jquery图片瀑布流 jquery图片瀑布流 jquery -
jquery点击添加图片瀑布流布局代码.zip
2019-07-11 10:43:00jquery点击添加图片瀑布流布局代码，点击内容部分，每次都会增加图片的个数，这样的效果也是很酷炫的，一般瀑布流我们会用在企业网站的产品展示或者个人网站中的相册这块，php中文网推荐下载！ -
微信小程序图片瀑布流布局demo
2016-12-13 09:38:14微信小程序图片瀑布流布局demo -
jQuery点击添加图片瀑布流布局效果特效代码
2021-03-20 03:59:58jQuery点击添加图片瀑布流布局效果基于jquery.2.1.4.min.js制作，鼠标点击网页任意地方添加2张图片，自动排版。 -
jQuery图片瀑布流分类筛选代码
2021-06-24 11:14:49jQuery图片瀑布流分类筛选代码是一款点击tab分类菜单筛选图片效果代码。 -
小程序瀑布流组件实现翻页与图片懒加载
2020-11-20 12:01:09瀑布流组件实际效果如下图所示，左侧为用户交互效果，右侧为图片懒加载实际效果。 2 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，waterfall-item宽度固定，高度不定，视觉表现为... -
JavaScript实现图片瀑布流和底部刷新
2020-11-27 08:26:39瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板 实现这个功能首先要有html，css和js基础 首先先实现瀑布流 即下一行的图片放在上一行的凹下去的地方 基本的... -
jQuery无限滚动加载图片瀑布流代码
2016-03-16 11:06:16插件描述：jQuery无限滚动瀑布流式显示. -
jQuery点击添加更多图片瀑布流代码
2021-04-07 18:14:31jQuery点击添加更多图片瀑布流代码是一款仿Masonry图片瀑布流布局，鼠标点击添加更多的图片代码。 -
jQuery无限滚动加载图片瀑布流代码.rar
2019-05-24 05:21:03jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作，自适应屏幕分辨率，鼠标滚动图片无限加载。 -
瀑布流.7z-手写图片瀑布流效果
2021-11-17 10:46:49用html-css-jss手写的图片瀑布流效果，有注释 -
html5响应式动态网格图片瀑布流布局
2019-09-01 17:03:41html5响应式动态网格图片瀑布流布局 -
Ionic3实现图片瀑布流布局
2020-08-29 18:17:34本篇文章主要介绍了Ionic3实现图片瀑布流布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
JavaScript结合CSS实现图片瀑布流布局
2019-08-23 10:09:54整个瀑布流布局用到了CSS和JavaScript，首先我们将不同尺寸的图片设置成宽度一致，然后一列列地分布，同时我们还可以将图片放大浏览，这种图片的瀑布流排列方式在现代相册应用中使用十分广发，特别是移动端的显示... -
手机版网页图片瀑布流
2017-01-17 23:18:35手机版网页图片瀑布流，底部自动对齐，通过修改元素位置实现效果，完全自己实现，逻辑简单，可自己修改 -
使用JS实现图片展示瀑布流效果(简单实例)
2020-10-21 14:33:45下面小编就为大家带来一篇使用JS实现图片展示瀑布流效果(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
jQuery响应式自适应图片瀑布流代码.zip
2019-07-11 11:03:25js代码 [removed][removed] [removed][removed] [removed] var gallery = $('.photos').gallerify({ ... 这是一款仿百度图片瀑布流网格布局效果的jQuery响应式自适应图片瀑布流代码，可自适应浏览器宽度。
收藏数
17,720
精华内容
7,088