使用CSS和JavaScript实现瀑布流布局-优快云博客

本文链接：https://blog.youkuaiyun.com/FGenius/article/details/106135149

这是一个关于如何使用HTML、CSS和JavaScript实现瀑布流布局的示例代码。通过设置CSS弹性布局，JavaScript动态加载图片并调整布局，实现了网页中图片的瀑布流展示效果，当用户滚动页面时，会自动加载更多图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>waterfall</title>
   </head>
   <style type="text/css">
       body{
           background-color: #dedede;
           margin: 0;
           padding: 0;
       }
       .waterfall_container{
           width: 60%;
           height: 500px;
           margin: 0 auto;
           /* 弹性布局 */
           display: flex;
           /* 方向:横向 */
           flex-direction: row;
       }
       .waterfall_container .item{
           /*弹性项的占比*/
           flex: 1;
           margin: 17px;

       }
       .waterfall_container .item img{
           width: 100%;
           border: 10px white solid;
           margin-top: 8px;
           transition: all 0.3s ease-in-out;
       }
       .waterfall_container .item img:hover{
           cursor: pointer;/*鼠标变小手 */
           transform: scale(1.05);/* 变大1.05倍 */
           box-shadow: 0px 3px 2px 1px #999;

       }
   </style>
   <body>
       <div class="waterfall_container">
           <div class="item" id="waterfall_1"></div>
           <div class="item" id="waterfall_2"></div>
           <div class="item" id="waterfall_3"></div>
           <div class="item" id="waterfall_4"></div>
       </div>
   </body>
   <script type="text/javascript">
       //屏幕默认大小初始化图片占用位置
       var windowHeight = window.screen.height+500 ;

       var imgId = 0;

       window.onload =function(){
           insterImg();
           //监听滚动事件
           window.document.addEventListener("scroll",function(){
           if(document.documentElement.scrollTop+ window.screen.height> document.documentElement.scrollHeight){
               //再次插入图片
               windowHeight +=500;
               insterImg();
           }
           });
           }
           //插入图片的算法
           var insterImg = function(){
               var inter = setInterval(function(){//定时器
                   if(document.documentElement.scrollHeight > windowHeight){
                       clearInterval(inter);//停止定时器
                   }
                   var mDiv = minDiv();
                   //插入图片
                   imgId++;
                   if(imgId>10){
                       imgId = 1;
                   }
                   var img = document.createElement("img");
                   img.setAttribute("src","img/"+imgId +".jpg");
                   mDiv.appendChild(img);
               },100);

       }
       var minDiv =function(){
           var waterfall_1 =document.getElementById("waterfall_1");
           var waterfall_2 =document.getElementById("waterfall_2");
           var waterfall_3 =document.getElementById("waterfall_3");
           var waterfall_4 =document.getElementById("waterfall_4");

           var waterfallImg_1= waterfall_1.children;
           var waterfallImg_2= waterfall_2.children;
           var waterfallImg_3= waterfall_3.children;
           var waterfallImg_4= waterfall_4.children;

           var waterfall_1height= jishuan(waterfallImg_1);
           var waterfall_2height= jishuan(waterfallImg_2);
           var waterfall_3height= jishuan(waterfallImg_3);
           var waterfall_4height= jishuan(waterfallImg_4);

           var minHeight = Math.min(waterfall_1height,waterfall_2height,waterfall_3height,waterfall_4height);
               if(minHeight == waterfall_1height){
                   return waterfall_1
               }
               if(minHeight == waterfall_2height){
                   return waterfall_2
               }
               if(minHeight == waterfall_3height){
                   return waterfall_3
               }
               if(minHeight == waterfall_4height){
                   return waterfall_4
               }
       }
       var jishuan =function(waterfallImg){
           if(waterfallImg == null || waterfallImg.length ==0){
               return 0;
           }else{
               var height = 0;
               //获取当前列每一张图片
               for(var i = 0;i<waterfallImg.length;i++){
                   var img = waterfallImg[i];
                   var h = img.height;
                   height += h;
               }
               return height;
           }
       }
   </script>

</html>

js瀑布流代码