普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)

解决问题:
如何获得每一排存放的图片数，并且能随着窗口的改变而改变（考虑小数的情况）
如何获得包裹整个图片的div的宽度
如何获得第一排的最小高度
如何使第二排的第一张图片的高度是第一排最小高度加上本身高度
如何使得之后的排都按照前两排的格式排列，即如何改变第一排高度内数组的值
图片的定位问题

代码示例

<html><head><meta charset="utf-8"><title></title><style>*{margin:0px;padding:0px;}.box{margin:0px  auto;position:relative ;}img{margin:10px;padding: 10px;border: solid 1px pink;border-radius:10px;box-shadow:5px 5px 10px skyblue}.w{float:left;}</style></head><body><div class="box"></div><script>var box=document.querySelector(".box");var dataStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}';var data=JSON.parse(dataStr);//遍历对象，确定创建多少个divfor(var i=0;i<data.src.length;i++){var imgDiv = document.createElement('div');var img=document.createElement("img");//获取图片路径img.src="img/"+data.src[i];imgDiv.className = 'w';imgDiv.appendChild(img);box.appendChild(imgDiv);}window.onload=function(){//让瀑布流居中//获取视口的宽度var viewWidth=document.documentElement.clientWidth;//用视口的宽度除一个div的宽度，即可随着视口的变化，动态改变每一行的数量/*通过类名获取创建的div*/var divs=document.querySelectorAll(".w");var oneWidth=divs[0].offsetWidth;var count=Math.floor(viewWidth/oneWidth);//数量乘一个div的宽度即可获取总宽度box.style.width=count*oneWidth+'px';console.log(count*oneWidth);//成型//存储第一行每个元素的高度var heightArr=[];for(var i=0;i<divs.length;i++){if(i<count){heightArr.push(divs[i].offsetHeight);}else{//计算第二行的每张图片拜访位置，从上一行最小高度的图片下摆放var minValue=Math.min.apply(null,heightArr);//获取最小值在数组内的下标var minIndex=heightArr.indexOf(minValue);var x=divs[minIndex].offsetLeft;//使得下一排的div的高度，为数组中最小的高度var y=minValue;//给创建的div加定位，相对于整个divdivs[i].style.position='absolute';divs[i].style.left=x+'px';divs[i].style.top=y+'px';//改变最小的div的高度，使得下一排的第二张照片在上一排的第二小的照片下摆放console.log(heightArr);heightArr[minIndex]=minValue+divs[i].offsetHeight;}}}</script></body>
</html>

普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)相关推荐

html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
vue瀑布流demo_面试加分企业级Vue瀑布流
介绍前端加分项目来了!!! 这篇文章主要介绍,企业级网站页面瀑布流布局的实现,主要包括: 瀑布流是什么瀑布流的实现原理瀑布流的使用场景瀑布流的的实现有哪些问题&如何解决可扩展使用场景 ...
swift瀑布流实现_蘑菇街PC首页瀑布流实践
零.介绍这篇文章主要是介绍网站页面瀑布流布局的实现,主要包括: 瀑布流是什么瀑布流的实现原理瀑布流的使用场景实现中有哪些问题 & 如何解决可扩展的使用场景一.瀑布流是什么瀑布流, ...
IOS开发之异步加载网络图片并缓存本地实现瀑布流（一）
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为博主原创文章,未经博主允许不得转载. [objc] view plaincopy </pre>&l ...
瀑布流的3种实现方式
瀑布流的3实现方式 1:js 两列布局实现,思路:左右分为两个容器,根据容器的高度(相对低的那一个)决定下一个元素应该放在哪个容器内,这样视觉就实现了瀑布流的效果,代码如下: 瀑布流容器 <!- ...
jquery 与php交互,jquery实现瀑布流并与php实现数据交互
以前js 实现过一个瀑布流,jquery 也来实现一个主要思路: 1 先显示出来大概20张图片,使界面出现滚动条 2 设置显示出来图片父id 设置为relative 定位,图片定位方式为float ...
JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过--今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果二.html代码 & ...

普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)

普通瀑布流(错落有致的排列,水平不对齐，左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)相关推荐

最新文章

热门文章