简单实现加载图片的瀑布流效果

Posted 2020-08-11
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单实现加载图片的瀑布流效果相关的知识，希望对你有一定的参考价值。
代码很简单，没有注释
<style type="text/css">
        *{
            margin:0px;
            padding:0px;            
        }
        #container{
            position:relative;
        }
        .box{
            padding:5px;
            float:left;
        }
        .box_img{
            padding:5px;
            border:1px solid #CCC;
            box-shadow:0 0 5px #CCC;
            border-radius:5px;
            
        }
        .box_img img{
            width:150px;
            height:auto;
        }
    </style>
  </head>
  <body>
      <div id="container">
      <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
      </div>
      <script type="text/javascript">
          window.onload = function(){
              imgLocation("container","box");
              var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"1.jpg"},{"src":"2.jpg"}]};
              window.onscroll = function(){
                  if(checkFlag()){
                      var cparent = document.getElementById("container"); 
                      for(var i =0;i<imgData.data.length;i++){
                          var ccontent =document.createElement("div");
                          ccontent.className = "box";
                          cparent.appendChild(ccontent);
                          var boximg = document.createElement("div");
                          boximg.className = "box_img";
                          ccontent.appendChild(boximg);
                          var img = document.createElement("img");
                          img.src = "img/"+imgData.data[i].src;
                          boximg.appendChild(img);
                      }
                      imgLocation("container","box");
                      
                  }
              };
          };
          
          function checkFlag(){
              var cparent = document.getElementById("container");
              var ccontent = getChildElement(cparent, "box");
              var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
              var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
              var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
              if(lastContentHeight <scrollTop+pageHeight){
                  return true;
              }
          }
          
          function imgLocation(parent,content){
              //将parent下所有的content全部取出
              var cparent = document.getElementById(parent);
              var ccontent = getChildElement(cparent,content);
              var imgWidth = ccontent[0].offsetWidth;
              var num = Math.floor(document.documentElement.clientWidth/imgWidth);
              cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
              
              var boxHeightArr = [];
              for(var i=0;i<ccontent.length;i++){
                  if(i<num){
                      boxHeightArr[i] = ccontent[i].offsetHeight;
                  }else{
                      var minHeight = Math.min.apply(null,boxHeightArr);
                      var minIndex = getMinHeightLocation(boxHeightArr,minHeight);
                      ccontent[i].style.position = "absolute";
                      ccontent[i].style.top = minHeight+"px";
                      ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
                      boxHeightArr[minIndex] = boxHeightArr[minIndex]+ccontent[i].offsetHeight;
                  }
              }
          }
          function getMinHeightLocation(boxHeightArr,minHeight){
              for(var i in boxHeightArr){
                  if(boxHeightArr[i] == minHeight){
                      return i;
                  }
              }
          }
          
          function getChildElement(parent,content){
              var contentArr = [];
              var allContent = parent.getElementsByTagName("*");
              for(var i=0;i<allContent.length;i++){
                  if(allContent[i].className == content){
                  contentArr.push(allContent[i]);
                  }
              }
              return contentArr;
          }
          
      </script>
  </body>
以上是关于简单实现加载图片的瀑布流效果的主要内容，如果未能解决你的问题，请参考以下文章
js实现瀑布流加载图片效果
js实现瀑布流以及加载效果
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
利用JS实现简单的瀑布流效果
74.手机端图片瀑布流的加载代码和效果
百度瀑布流图片动态加载实现