JavaScript实现自适应宽度瀑布流布局详解

177 浏览量更新于2024-08-30 收藏 110KB PDF 举报

“javascript自适应宽度的瀑布流实现思路”探讨了一种通过绝对定位CSS、JavaScript、AJAX和JSON实现自适应宽度瀑布流布局的方法。这种布局常见于许多网站，如花瓣网和美丽说，受到Pinterest的启发。文章着重介绍了如何使用这些技术来创建和更新布局。实现瀑布流布局的基本步骤如下： 1. 计算页面宽度，根据宽度确定可容纳的数据块列数。例如，如果页面足够宽，可能可以设置6列。 2. 当所有图片加载完成后，记录每个数据块的高度，以便进行精确布局。 3. 使用绝对定位填充页面的第一行，所有元素的顶部位置相同，并记录每列的高度。 4. 继续使用绝对定位将后续数据块放置在当前最短的列下方，并更新该列的高度。 5. 针对浏览器窗口大小的变化，需要重新执行步骤1-4，调整列数以适应新的页面宽度。 6. 当用户滚动到页面底部时，通过AJAX加载新内容，并将其定位在当前最短列之后，同样更新列高度。为了实现这个功能，我们需要准备HTML结构和基础CSS样式。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>瀑布流布局</title> <style type="text/css"> body { margin: 0; font-family: 微软雅黑; } #flow-box { margin: 10px; } .item { width: 200px; position: absolute; } </style> </head> <body> <div id="flow-box">  </div> <script src="your-javascript-file.js"></script> </body> </html> ``` 在JavaScript文件中，我们需要编写处理布局和动态加载内容的函数。这包括监听窗口大小变化事件，计算列数，以及在需要时通过AJAX请求获取并添加新数据。AJAX请求通常会返回JSON格式的数据，其中包含新数据块的信息，如宽度、高度和内容。瀑布流布局的实现涉及到前端开发的多个方面，包括CSS布局、JavaScript事件处理和AJAX异步通信。理解并熟练掌握这些技术对于构建响应式和动态的网页至关重要。如果你对瀑布流布局的实现原理已经有所了解，那么可以直接进行编码实践；否则，深入学习上述步骤和相关技术将是必要的。

lenArr.push(li[i].offsetHeight);

}

</script>

由于数据块里面含有图片，也没有给定图片的尺寸，所以需要等待图片加载完成后方可获取其高度；那么可以在

window.onload的时候调用flow方法。代码变成：

复制代码代码如下:

function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离

//... 省略上一步的部份代码 ...

ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中

var liLen = li.length;

var lenArr = [];

for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组

lenArr.push(li[i].offsetHeight);

}

//图片加载完成后执行

window.onload = function() {flow(10, 10)};

</script>

3、用绝对定位先将页面第一行填满，因为第一行的、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。位置都是一样的，然后用数组记录每一列的总高度。

复制代码代码如下:

function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离

　　　　　　　　　　 //... 省略上一步的部份代码 ...

for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组

lenArr.push(li[i].offsetHeight);

}

var oArr = [];

for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArr

li[i].style.top = "0";

li[i].style.left = iw * i + "px";

li[i].style.opacity = "1";

li[i].style["-moz-opacity"] = "1";

li[i].style["filter"] = "alpha(opacity=100)";

oArr.push(lenArr[i]);

}

document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面

}

//图片加载完成后执行

window.onload = function() {flow(10, 10)};

//获取数字数组的最大值

function _getMaxValue(arr) {

var a = arr[0];

for (var k in arr) {

if (arr[k] > a) {

a = arr[k];

}

return a;

}

</script>

截至目前为止，可以到浏览器里面预览一下效果：

剩余10页未读，继续阅读

weixin_38564003

粉丝: 6
资源: 923

JavaScript实现自适应宽度瀑布流布局详解

jquery自适应照片瀑布流

jquery自适应照片瀑布流.zip

jQuery网页全屏自适应图片瀑布流布局代码

实现vue3 图片瀑布流 宽度自适应

vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局,宽高度不

如何利用CSS3弹性盒子实现一个响应式的等高瀑布流布局？请结合JavaScript动态加载图片的技术。

横向瀑布流

hbuilder如何实现图片瀑布流用循环代码实现

tailwind。css实现瀑布流

vue2封装瀑布流组件

最新资源

实现vue3 图片瀑布流宽度自适应