JavaScript实现图片瀑布流

上一篇文章讲了php在服务端实现图片瀑布流渲染纯php实现图片瀑布流渲染_sdxjwkq01的博客-CSDN博客，这篇再讲个正常点的前端实现的瀑布流吧。其实也很简单，首先创建几个宽度相同的并排的竖向div，然后找出高度最小的div，往里面插入图片，重新计算高度最小的div，往里面插入图片，如此往复，直到所有图片都插入到页面中。下面还是先上代码，注释很详细了。

<head><meta charset="utf-8"><style>body{overflow-y: auto;}.photos{position: absolute;top:0px;left: 0px;bottom:0px;width:500px;background: #000;overflow-x:hidden;}img{margin: 5px;}</style>
</head>
<body><div class="photos"></div>
</body>
<script>//图片地址，后台生成的let imgs=["imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170328.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170400.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170420.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170434.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170454.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170514.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170527.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170543.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170559.png"];class Photos{/*** [constructor 构造方法]* @return {[type]} [description]*/constructor(){this.listView();}/*** [listView 瀑布流图片列表]* @return {[type]} [description]*/listView(){let col=2;//瀑布流列数let Height=[];//用于计算最小高度for(var i=0;i<col;i++){Height[i]=0;}let Width=Math.floor(document.querySelector(".photos").clientWidth/col);//图片容器宽度let html=``;//根据列数画出图片列容器for(var i=0;i<Height.length;i++){html+=`<div id="tree${i}" style="position:absolute;left:${i*Width};top:0px;width:${Width};padding:1px;background:#fff;"></div>`;}document.querySelector(".photos").innerHTML=html;for(var i=0;i<imgs.length;i++){var minHeight=Math.min.apply(Math,Height);//找到所有列的最小高度var minIndex=0;//根据最小高度找到列索引for(var j=0;j<Height.length;j++){if(Height[j]==minHeight){minIndex=j;break;}}//向高度最小的列容器插入图片document.querySelector("#tree"+j).innerHTML+=`<img style="width:${Width-10}px;" src="${imgs[i]}" />`;//修改相应容器高度Height[j]+=document.querySelector("#tree"+j).offsetHeight;}}}new Photos();</script>

运行一下，效果如下图：

确实很简单吧，这次就先分享到这里

JavaScript实现图片瀑布流相关推荐

用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
React单页面图片瀑布流——Macy.js
图片瀑布流需求:一个数组里的图片按两列排列,图片尺寸不一样. 问题:如果只是简单的数组分成两个数组,有可能一组图片高度加起来远远高于另一组,视觉效果太差. 想了想简单的js实现逻辑: 1.一个图片数 ...
jQuery图片瀑布流demo效果示例（整理）jQuery瀑布流效果
效果图: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8& ...
图片瀑布流加载和购物车
图片瀑布流加载注释中为详细注释动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
Vue原生图片瀑布流
图片瀑布流可以节省图片的排版空间,美观图片的排列,避免图片排列的参差不齐. 实现图片瀑布流可以固定宽(花瓣),也可以固定高(百度图片),看个人需求,我的需求是宽固定. 如果图片的排列不适用瀑布流的话, ...
Android RecyclerView实现图片瀑布流
1.图片瀑布流现在几乎基本上是app比较常见的图片展示方式,此文简单介绍下RecyclerView + Glide结合实现图片瀑布流的效果的实现方法之一,先上效果: 2.具体实现如下: // 1.设置 ...
jaliswall.js图片瀑布流插件
下载地址 jaliswall.js图片瀑布流插件,jQuery响应式瀑布流布插件jaliswall dd:
微信小程序简单实现图片瀑布流
简单实现图片瀑布流 <view class="container"><view class="box" wx:for='{{show}}' w ...
Android初学二之仿微信APP实现RecyclerView控件的设计开发，实现点击事件及图片瀑布流
目录 0 实验环境 1 界面展示 2 功能说明 3 核心代码 3.1 实现RecyclerView控件的设计开发 3.2 添加了文字库assets 3.3 实现点击事件对item中的每个LinearL ...
图片瀑布流ios中部分显示空白
@ios中的web页面图片布局闪动或者显示空白之类问题的解决方法出现问题的代码(问题现象:ios手机中商品图片只有少部分加载成功其余出现大量空白 ) 现在购买再送 80% .pro_img im ...

JavaScript实现图片瀑布流

JavaScript实现图片瀑布流相关推荐

最新文章

热门文章