百度图片的横向瀑布流是怎么实现的？

发布于 2022-09-05 09:12:27 字数 146 浏览 19 评论 0

前端瀑布流是老生常谈的话题，一般都是固定宽度，新内容不停地追加到最短列，但是百度图片的瀑布流就不这么简单了。百度图片是固定高度，每一行图片宽度不定，但是都能恰好排满，而且调整屏幕大小时，图片整体高度都会跟着变，每一行的图片个数也会跟着变，厉害了，我的百度，研究半天，没看出门道。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

摇划花蜜的午后 2022-09-12 09:12:27

flex布局

<div>
    <img/>
    <img/>
    <img/>
    <img/>
<div>
div{            
        display: flex;/*显示模式设置为弹性盒子*/
        flex-wrap: wrap;/*进行强制换行*/
    }        
    div:after{            
        /*对最后一个伪元素进行最大限度伸缩*/            
        content: ' ';            
        flex-grow: 999999999999999999999999999999999999;        
    }        
    img{             
        height: 200px;/*高度*/            
        width: auto;            
        margin: 2px;            
        flex-grow: 1;/*进行按比例伸缩*/            
        object-fit: cover;/*进行裁切，并且图片按比例缩放*/        
    }

回复收藏 0

也只是曾经 2022-09-12 09:12:27

这种是不定高的瀑布流，把高度计算的逻辑换成宽度就能实现了
demo

            for(var i = 0; i < this.items.length; i++){
                if(i < colMaxNumber){
                    itemHeightArray[i] = this.items[i].offsetHeight + this.margin;
                    this.items[i].style.top = 0;
                    this.items[i].style.left = i * this.singleItemWidth + 'px';
                }else{
                    var minHeight = Math.min.apply(null, itemHeightArray);
                    var minHeightIndex = $.inArray(minHeight, itemHeightArray);

                    this.items[i].style.top = minHeight + 'px';
                    this.items[i].style.left = minHeightIndex * this.singleItemWidth + 'px';
                    itemHeightArray[minHeightIndex] += this.items[i].offsetHeight + this.margin;

                //    另一种方法
                // var innsertColumn = this.min(itemHeightArray);
                // //    当前要放置的元素的高度加上边距
                // var imgHeight = this.items[i].offsetHeight + this.margin;

                // this.items[i].style.top = itemHeightArray[innsertColumn] + 'px';
                // this.items[i].style.left = innsertColumn * this.singleItemWidth + 'px';
                // itemHeightArray[innsertColumn] += imgHeight;
                }    

            }

回复收藏 0

以为你会在 2022-09-12 09:12:27

有完整代码请在谷歌浏览器中测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="waterfall">
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

var img = null;//临时的图片对象
var box =document.getElementById("waterfall");//容器对象
var lastS=0; //上一次的scrollTop
var nowS=0;//现在的scrollTop
var delS=0;//scrollTop间隔
var sum=0;//用来测试一共加载了多少张图片

//用来计算什么时候适合加载图片
box.onscroll=function()
{
  nowS=box.scrollTop;
  delS=nowS-lastS;
  if(delS>=100){
    lastS=box.scrollTop;
    insertImg();
  }
}
function insertImg()
{
  img=new Image();
  //测试用的实际可以放你先要的图片地址
  img.src="imgs/"+Math.floor(Math.random()*13)+".jpg";
  img.onload=function(){
    box.appendChild(this);
    sum++
    console.log(sum);
    //用来判断停止加载的时机
    if(this.offsetTop<box.offsetHeight+box.scrollTop){
      insertImg();
    }
  }
}
insertImg();

*{
  margin: 0px;
  padding: 0px;
}
#waterfall{            
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height:600px;
  align-content:flex-start;
  overflow-y: scroll;
}        
#waterfall:after{                       
    content: ' ';            
    flex-grow: 999999999999999999999999999999999999;        
}        
#waterfall img{             
    height: 200px;           
    width: auto;            
    margin: 2px;            
    flex-grow: 1;            
    object-fit: cover;
    position: relative;       
}

回复收藏 0

~没有更多了~