javascript - 不确定图片高度情况下，如何实现瀑布流布局？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 不确定图片高度情况下，如何实现瀑布流布局？

伊谢尔伦 2017-04-11 10:24:56

[JavaScript讨论组]

483

很多情况下，带图片的列表，在不能确定每一个item高度的情况下，如何实现瀑布流？每一个item的高度不一定，也不一样高（图片还会因网络延时而出现高度变化的情况）

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(4)

PHP中文网2017-04-11 10:26:56 4楼

两种方式：
1，item使用绝对定位的；例子：
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="container">
    <p class="box">
        <p class="box-img">
            <img src="img1.jpg" alt="pic1">
        </p>
    </p>
    <p class="box">
        <p class="box-img">
            <img src="img2.jpg" alt="pic2">
        </p>
    </p>
    <p class="box">
        <p class="box-img">
            <img src="img3.jpg" alt="pic3">
        </p>
    </p>
    <p class="box">
        <p class="box-img">
            <img src="img4.jpg" alt="pic4">
        </p>
    </p>
    <p class="box">
        <p class="box-img">
            <img src="img5.jpg" alt="pic5">
        </p>
    </p>
    <p class="box">
        <p class="box-img">
            <img src="img6.jpg" alt="pic6">
        </p>
    </p>
</p>
</body>
</html>

CSS:

*{margin: 0;padding: 0;}
.container{position: relative;width: 1040px;margin: 0 auto;}
.box{float: left;padding: 5px;font-size: 0;}
.box-img img{width: 250px;}

JQ:

$(function(){
    var elesHeight = [];//每个元素的宽度
    var colsHeight = [0,0,0,0]; //每列元素现有的高度
    $(".container .box").each(function(index,item){
        var eleHeight = $(this).height();
        elesHeight.push(eleHeight);
    });

    //依次摆放每一个元素
    $(".container .box").each(function(index,item){

        //获得该元素应该在第几列
        var colShould = getMinHeightCol(colsHeight);

        var tempTop = colsHeight[colShould];
        var tempLeft = colShould*260;
        $(this).css({"position":"absolute","top":tempTop+"px",left:tempLeft+"px"});

        //同时将该列的高度加上当前新增元素的高度
        colsHeight[colShould] += $(this).height();
    });

    //得到四列中高度最小的那一列
    function getMinHeightCol(arr){
        var minHeight = Math.min.apply(null, arr);
        console.log("最小高度:"+minHeight);
        for(var i in arr){
            if(arr[i]==minHeight){
                return i;
            }
        }
        //默认第一列
        return 0;
    }
    var re;
    window.onresize = function() {
      clearTimeout(re);
      re = setTimeout(resize,100); 
    };
});

2：item所显示图片为缩略图，缩略图生成后高度存储到数据库，前端生成页面时，写到img的style="height:XXXX"即可；但是文字内容么~~~~只能固定高度了；

更新下，丢人了，少些了高度两字被人嘘了；骚瑞哦~

赞 +0

添加回复

阿神2017-04-11 10:26:56 3楼

看一下waterful 插件。。

赞 +0

添加回复

巴扎黑2017-04-11 10:26:56 2楼

imagesLoaded插件，用来监视图片加载，加载完成触发事件然后布局。
其实就是给每个添加的图片监视onload事件。

赞 +0

添加回复

高洛峰2017-04-11 10:26:56 1楼

由于时间的原因，我先做了临时的解决方案：@golden_freeman_china的优化方案

3列布局：用bootstrap列布局搭建好盒子

<p class="row layout-box">
    <p class="col-xs-4 layout-itme"></p>
    <p class="col-xs-4 layout-itme"></p>
    <p class="col-xs-4 layout-itme"></p>
</p>

js实现

Array.prototype.min = function() {
    var min = { key: 0, val: this[0] };
    for (var i = 0; i < this.length; i++) {
        if (this[i] < min.val) {
            min = {
                key: i,
                val: this[i]
            }
        }
    }
    return min;
}
function setHeight(data) {
    //去除第几条数据
    var index = 0;
    //可以不阻塞后面的代码执行，可以延时判断列布局高度
    var timer = setInterval(function() {
        //保存三列布局的高度数值
        var arr = [];
        //获取三列盒子
        var boxs = document.querySelectorAll('#layout-box .layout-item');
        //获取每一列高度
        for (var i = 0; i < boxs.length; i++) {
            var realStyle = window.getComputedStyle(boxs[i], null).height;
            //不适用parseInt转换，获取到的将是数字形式的字符串，不能使用arr.min进行判断最小值
            arr.push(parseInt(realStyle.match(/\d+/)[0]));
        }
        //得到哪一列的高度最小
        var key = arr.min().key;

        var p = document.createElement('p');
        //将html给p，用于appendChild到boxs中
        p.innerHTML = data[index].content;
        //给高度最小的那一列添加子元素
        boxs[key].appendChild(p);
        //保证data中所有内容都被添加到页面
        if (index < data.length - 1) {
            index++;
        } else {
            clearInterval(timer);
        }
    }, 0)
}

ajax(url,function(data){
    /*//ajax返回的数据列表
    var data = [
        {
            content:"<img src=''/>",
        },
        {
            content:"<img src=''/>",
        },
        {
            content:"<img src=''/>",
        },
    ];*/
    setHeight(data);
})

缺陷：图片加载非常慢时仍然会出现三列高度差距过大的问题，定时器时差不要超过30ms,否则会有人为的卡顿效果（或者加上渐入效果可以解决这个问题）

方案2：
纯css3实现多列布局：column-count，column-gap，column-rule

缺陷：