js实现瀑布流的效果

最新推荐文章于 2024-09-23 15:34:46 发布
最新推荐文章于 2024-09-23 15:34:46 发布
阅读量445 收藏 1
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68537886/article/details/131161844
版权

文件目录
在这里插入图片描述
index.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #waterfull {
            width: 1200px;
            height: auto;
            position: relative;
        }

        .box {
            float: left;
            padding: 5px;
        }

        .box_image {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 5px 5px 8px #ccc
        }

        #waterfull img {
            width: 278px;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="waterfull">
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=676339547,505086010&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=676339547,505086010&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F72ce0dcb-c2a3-49fd-933d-85c7e5c4533d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=51028736bd7b563f7d5e526e91ddb503"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img2.baidu.com/it/u=3853345508,384760633&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa3ea80a8-4873-4346-b691-6dd773b8491a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=3e394623a1e12b6151d73c75ff87193c"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4045f4e3-30ff-46b9-961c-01abbb9dc87c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=af81a586e26288d64db5dfc9a59dcaf2"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb47f4c14-8651-410b-adcd-961ca31c0780%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=521719cbfeeaf1c4bbc3d055fbf1a789"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4045f4e3-30ff-46b9-961c-01abbb9dc87c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=af81a586e26288d64db5dfc9a59dcaf2"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4045f4e3-30ff-46b9-961c-01abbb9dc87c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=af81a586e26288d64db5dfc9a59dcaf2"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0c0b51bd-6613-4096-bfe6-17b59ee1ea1a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686368557&t=27e74f5d7be3d760b13bebb2f858acda"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        <div class="box">
            <div class="box_image"><img
                    src="https://picnew12.photophoto.cn/20180805/zongyikatongjianyuexiaoqingxinbeijing-32856723_1.jpg"
                    alt=""></div>
        </div>
        

    </div>

</body>

</html>

js代码

window.onload = function () {
    images_location("waterfull", "box");
    function images_location(Parent, Children) {
        var parent = document.getElementById(Parent);//获取id为waterfull的元素
        var children = getChildElement(parent, Children);//通过一个封装函数来获取上述获取到的元素的所有符合条件的子元素，获得一个数组
        var imageWidth = children[0].offsetWidth;//因为在css中已经设定了固定宽度，所以只需要第一张图片的宽度。
        var cols = Math.floor(1250 / imageWidth);
        // 获取在固定宽度的情况下可以放下的列数。当然这里可以不用固定宽度，而使用用户浏览器的宽度document.documentElement.clientWidth。
        var hArr = [];
        for (var i = 0; i < children.length; i++) {
            if (i < cols) {
                hArr.push(children[i].offsetHeight);//将第一列中的图片高度数据存到hArr数组中
            } else {
                var minH = Math.min.apply(null, hArr);//又有Math.min方法的参数必须是一个一个的数，故这里使用apply方法传入数组求得最小的高度
                var index = getMinhIndex(hArr, minH);//封装一个函数获得最小高度的图片所在列的索引
                children[i].style.position = "absolute";//使用绝对定位
                children[i].style.top = minH + "px";//注意：这里一定要有px这个单位，否则将会出错
                children[i].style.left = imageWidth * index + "px";//即left的值
                hArr[index] += children[i].offsetHeight;//将刚添加的那一列的offsetHeight值更新
            }

        }

    }
    function getChildElement(Parent, Children) {
        var childrenArr = [];
        var allChildren = Parent.getElementsByTagName("*");
        for (var i = 0; i < allChildren.length; i++) {
            if (allChildren[i].className == Children) {//注意：原生JavaScript中对于元素由className这个属性，即获取类名。
                childrenArr.push(allChildren[i]);
            }
        }
        return childrenArr;
    }
    function getMinhIndex(arr, val) {
        for (var i in arr) { //遍历arr数组中的每一个元素，其中i表示各元素的索引
            if (arr[i] == val) {
                return i;
            }
        }
    }
}
Wnn905
关注
js实现瀑布流效果
12-22
js实现瀑布流效果，下拉继续加载数据，移动端自适应屏幕
JS实现瀑布流效果
12-28
本文实例为大家分享了JS实现瀑布流效果的具体代码，供大家参考，具体内容如下 话不多说，直接上代码。如下： CSS部分： <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-radius: 4px;} </style> HTML部分（图片可自行添加）： <div class=cont> <div class=box> <
JS实现瀑布流
qq_36582776的博客
03-14 891
function waterFall(){ var addimg={'data':[{'src':'0.jpg'},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"}]}; var heightArr=[]; screenWidth=window.innerWidth.
使用js写一个简单的【瀑布流】布局效果
最新发布
我们好像在哪见过 私
09-23 781
使用js写一个简单的【瀑布流】布局效果
Js实现瀑布流效果
weixin_55983004的博客
05-26 4794
Js实现瀑布流效果 通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示 效果图： 核心： 1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数 2.将每个图片定位 3.每次找到最小高度的列，将图片加到该列后 HTML部分以及CSS样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &lt
js 实现瀑布流
qq_44419617的博客
12-20 244
瀑布流又称瀑布流式布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
js实现瀑布流
Pikachu_999的博客
06-28 1288
从第二行开始，将每个图片放在高度最小的位置，视觉上会表现为参差不齐的布局。实现的方式：对应父元素进行相对定位，图片所在的盒子进行绝对定位。8、对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引。5、将获取的pic的高push到一个数组记录下来。三、获取可视窗口waterfall节点的宽度。2、将可视窗口宽度减去行间隔的宽度。6、在非第一行中，找到数组的最小值。1、设置每一个pic的宽度。四、计算每个pic的宽度。2、获取每一个pic的高。4、给第一行的进行定位。
css和js实现瀑布流效果示例
12-13
为了实现瀑布流效果，JavaScript（这里可能使用了jQuery库）用于计算每个列的高度并动态调整元素的位置。插件代码中的`$.fn.waterfal`是一个自定义的jQuery方法，接受一个选项对象`opt`，其中`wflist`是选择器，表示...
基于JavaScript实现瀑布流效果
11-29
在JavaScript中实现瀑布流效果，主要涉及到以下几个关键点： 1. **HTML结构**：首先，需要创建一个容器 `.container` 用来放置所有的元素，这里使用了四个 `.item` div 作为基础单元，每个 `.item` 用于显示一张...
JavaScript瀑布流的实现
drhrht的博客
02-26 461
瀑布流的核心 1, 根据 ajax请求的响应体结果 动态渲染生成页面 请求地址 请求方式 参数键名 都是 后端程序定义的 前端 只能根据需求 定义 携带的具体的参数数据 响应体数据是后端程序返回的数据结果 只能获取数据结果 不能修改数据结果 可以根据 响应体数据结果 动态渲染生成页面内容 可以使用 三元运算符 给标签定义属性等 2, 瀑布流 再次 发起请求的判断依据 上卷高度 + 视窗窗口高度 + 预留高度 > 最矮ul占位高度 3, 函数的节流 同时触发 多次执行 相同的函数程序 只需要触发执行
Js实现瀑布流
weixin_45786844的博客
07-29 1088
Js实现瀑布流思路
JS 瀑布流
梦想家博客
03-30 232
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { ma
JS瀑布流
qq_38851897的博客
12-23 424
这个页面主要通过前端技术中非常流行的瀑布流技术来展示图片，瀑布流技术的原理主要分为两部分： 1.瀑布流的排版 一，先将每张图片的宽度写死固定为某个值，这时每张图片的高度也随之等比例缩小，保证每张图片的宽度都一样。 二，根据浏览器的可视界面的宽度除以每张图片的宽度得出浏览器一行最多能够放几张图片Num，即Num = Math.floor（clientWidth / imgwidth） 三，这...
js实现 瀑布流
smile54533的博客
04-28 199
在这里插入代码片@TOC css var{ width:200px; background:#ccc; position:absolute; } createDiv() function createDiv(){ for(var i=0; i<20;i++){ var aDiv=document.createElement("div")...
使用js实现瀑布流
lishuaihao的博客
03-19 422
【代码】使用js实现瀑布流。
js 瀑布流
janeen-jn的博客
08-25 295
html: <div class="main"> </div> css: <style> * { margin: 0; padding: 0; } .main { position: rela...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值