JavaScript实现瀑布流布局的代码分享
前言
不知道大家在线上购物的时候有没有发现到，自己逛起来根本就停不下来，越往下翻越是觉得就会出现需要的东西。这就是很多电商公司都在使用的瀑布流布局，为了更好的留住用户，给你的感觉就是下面会有更精彩的东西，让你不停地往下滑，一步步走进消费“陷阱”。如何实现瀑布流布局，这也是阿里面试的经典考题。
如何实现
思路：将内容宽度一致，高度不一致的图片，从左至右排列，一行内容排满后，下一张就会按顺序排在最短的内容后，以此类推。
html部分
在页面放入20个box容器（几张图片就放几个容器），为方便给图片添加好看的样式，我在box容器里放了个box-img容器，再将图片放入。
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="./img1/1 (1).JPG" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img1/1 (2).JPG" alt="">
</div>
</div>
/*此处省多个box 几张图片就放几个box容器*/
</body> css部分
* {
margin: 0;
padding: 0;
}
/*让图片向左浮动*/
.box {
float: left;
}
/*定位*/
.container {
position: relative;
}
/*给图片容器设置相同的宽度 边框 盒子阴影*/
.box-img {
width: 150px;
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
/*让图片与图片容器宽度相等*/
.box-img img {
width: 100%;
}js部分
我们的目的其实就是要摆放图片的位置，先获取到所有的图片，当第一排向左浮动摆放好后，我们需要找到在第二排开始从谁是被需要摆放位置的。那就用屏幕视窗的宽度除以一个图片盒子的宽度，向下取整，那就知道第一行能放几张图，然后我们操作第num张之后的每一张图，把它们一一摆放到最矮那一列的位置。
window.onload = function() {
imgLocation('container', 'box')
}
//获取到所有要摆放的图片
function imgLocation(parent,content){
var cparent = document.getElementById(parent)
// cparent 下的所有的第一层的子容器 box
var ccontent = getChildElement(cparent,content) //[装了20个div]
//找从谁开始是需要被摆放位置的
var winWidth = document.documentElement.clientWidth //获取视窗的宽度
var imgWidth = ccontent[0].offsetWidth //获取图片盒子的宽度
var num = Math.floor(winWidth / imgWidth) //向下取整
// 操作第 num+1 张图
var BoxHeightArr = []
for (var i = 0; i < ccontent.length; i++){
// 前num张只要计算高度
if (i < num) {
BoxHeightArr[i] = ccontent[i].offsetHeight
}else{
//我们要操作的Box
var minHeight = Math.min.apply(null,BoxHeightArr)
var minIndex = BoxHeightArr.indexOf(minHeight)
ccontent[i].style.position = 'absolute'
ccontent[i].style.top = minHeight + 'px'
ccontent[i].style.left = (imgWidth * minIndex) + 'px'
//更新最矮的那一列的高度
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
}
}
} 在外面创建一个辅助函数，可以帮我们取到父容器中的某一层子容器
function getChildElement(parent,content){
var contentArr = []
var allContent = parent.getElementsByTagName('*') //[xxxx数组]
//遍历allContent 把中其类名为 content 的容器都存到contentArr数组中
for (var i = 0; i < allContent.length; i++){
//当前这个容器的类名是否为 content
if (allContent[i].className == content){
contentArr.push(allContent[i])
}
}
return contentArr
}实现效果图如下：
瀑布流布局的优点
良好的视觉体验 ；参差不齐的排列方式，以及流动布局的扩展性，打破常规网站布局排版，用户在浏览内容时会有新鲜感，带来良好的视觉体验。
吸引用户；可以通过界面展示给用户多条数据，并且让用户有可以向下浏览的冲动。
适应移动端；移动设备都偏小，屏幕能显示的内容不会很多，如果经常翻页的话显得疲劳，使用瀑布流布局用户只需要不停滚动就能不断地进行浏览。
到此这篇关于JavaScript实现瀑布流布局的代码分享的文章就介绍到这了,更多相关JavaScript瀑布流布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了echarts折线图每段显示不同的颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-09-09
这篇文章主要介绍了JS字符串与二进制的相互转化 ,在文中给大家提到了Js之字符串和字节码之间的相互转换，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
最近使用for-in语句遍历对象属性时发现遍历顺序并非属性构建顺序,这篇文章主要给大家介绍了关于JS for in遍历对象顺序不对的解决办法,需要的朋友可以参考下2023-11-11
微信内置浏览器WeixinJSBridge的使用技巧(隐藏右上角按钮,获取用户网络状态,支付等)
这篇文章主要介绍了微信内置浏览器WeixinJSBridge的使用技巧,隐藏右上角按钮,获取用户网络状态,支付,隐藏下方工具栏等,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了js文件包含的几种方式，在某些情况下还是比较实用的，下面以示例代码的方式来呈现2014-09-09
这篇文章主要介绍了javascript中的异步调用机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
以下map.js和map-util.js都是自定义的map，任选其一就可以。你可以用它来像java里new Map()和put()、remove()、get()等方法2017-11-11
javascript ie6兼容position:fixed实现思路
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置，由于网页中类似这样的元素很多，所以本文的出现是很有必要的了，接下为大家介绍下javascript如何实现ie6下的position:fixed2013-04-04
这篇文章主要为大家详细介绍了原生js实现弹跳小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
客户端限制只能上传jpg格式图片的js代码,对用户体验较好，适合网页中只能使用jpg格式图片的情况。2010-12-12
最新评论