这篇文章主要讲解了“javascript如何实现瀑布流布局效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现瀑布流布局效果”吧！如何实现思路：将内容宽度一致，高度
这篇文章主要讲解了“javascript如何实现瀑布流布局效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现瀑布流布局效果”吧！
思路：将内容宽度一致，高度不一致的图片，从左至右排列，一行内容排满后，下一张就会按顺序排在最短的内容后，以此类推。
在页面放入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></body> * { 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%; }我们的目的其实就是要摆放图片的位置，先获取到所有的图片，当第一排向左浮动摆放好后，我们需要找到在第二排开始从谁是被需要摆放位置的。那就用屏幕视窗的宽度除以一个图片盒子的宽度，向下取整，那就知道第一行能放几张图，然后我们操作第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如何实现瀑布流布局效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: JavaScript如何实现瀑布流布局效果
本文链接: https://www.lsjlt.com/news/357117.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0