分享JS實作瀑布流載入圖片效果碼-js教程-PHP中文網

首頁

web前端

js教程

分享JS實作瀑布流載入圖片效果碼

零下一度

Apr 25, 2017 am 10:44 AM

js圖片效果

今天學習了一個瀑布流加載效果，很多網站都有瀑布流效果，下面透過本文給大家分享利用JS實現簡單的瀑布流加載圖片效果，需要的朋友參考下吧

#今天學習了一個瀑布流加載效果，很多網站都有瀑布流效果，瀑布流就是很多產品顯示在網頁上，寬相同，高度不同，表現為多欄佈局，隨著頁面滾動條向下滾動，這種佈局也會不斷載入資料塊並附加至目前尾部。

原理是：

1.設定一行中的列數；

2.取第一行中每一個p的高度並把每一個高度放進一個陣列中；

3.算出陣列中最小高度的index值；

4.把第二行的第一個p放到最小高度的p的下方並把重新算出的高度值放進數組中，重新計算最小高度的index值；

#5.以此類推實現多欄佈局的瀑布流效果；

6.如果最後一張p的高度已滾動出現在底部時創建新的p添加到最後一張的後面，不斷循環以達到加載效果；接下來代碼實現。

<p id="main">
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/0.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/15.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/16.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/17.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/18.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/19.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/20.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/21.jpg"  class="lazy"   alt="" />
      </p>
    </p>
    <p class="box">
      <p class="Pic">
        <img src="/static/imghwm/default1.png"  data-src="images/22.jpg"  class="lazy"   alt="" />
      </p>
    </p>
  </p>

 *{padding: 0;margin: 0;}
#main{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.box{
  display: inline-block;
  float: left;
  padding: 10px 0 0 10px;
}
.Pic{
  border: 1px #ccc solid;
  padding: 10px;
  border-radius: 8px;
}
.Pic img{
  width: 162px;
}

#js程式碼：

<script>
  window.onload=function(){
    waterFall(&#39;main&#39;,&#39;box&#39;);
    var dataInt={
      "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"}]
    };
    /*滚动条滚动时触发的事件*/
    window.onscroll=function(){
      if(checkIsSlide()){ //结果返回是true则执行
        var omain=document.getElementById(&#39;main&#39;);
        /*添加p到页面上*/
        for(var l=0;l<dataInt.data.length;l++){ 
          var box=document.createElement(&#39;p&#39;);
          box.className="box";
          omain.appendChild(box);
          var pic=document.createElement(&#39;p&#39;);
          pic.className=&#39;Pic&#39;;
          box.appendChild(pic);
          var oimg=document.createElement(&#39;img&#39;);
          oimg.src="images/"+dataInt.data[l].src;
          pic.appendChild(oimg);
        }
        waterFall(&#39;main&#39;,&#39;box&#39;); //新添加的p都要重新执行waterFall方法，以实现瀑布流效果
      }
    }
  }
  /*实现瀑布流效果，多栏布局*/
  function waterFall(parent,pid){  //传两个参数，父元素parent和子元素pid
    var oparent=document.getElementById(parent);  //获取父元素
    var opid=getClass(oparent,pid);  //获取父元素下的classname为pid的所有子元素
    var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素宽度/一个子元素的宽度，即一行的列数
    var arrH=[];  //存放每一列的高度的数组
    for(var j=0;j<opid.length;j++){
      if(j<cols){ 
        arrH.push(opid[j].offsetHeight);//把第一行的高度都放进数组中
      }else{  //第二行开始
        var minH=Math.min.apply(null,arrH);  //计算arrH的最小值
        var Index=getHIndex(arrH,minH); //使用getHIndex方法获取最小值的index值
        /*把之后的p放到最小值p的下方*/
        opid[j].style.position=&#39;absolute&#39;; 
        opid[j].style.top=minH+&#39;px&#39;;
        opid[j].style.left=opid[0].offsetWidth*Index+&#39;px&#39;;
        arrH[Index]+=opid[j].offsetHeight; //数组中的最小值加上已放在下方的p的高度值并重新循环
      }
    }
     
  }
  /*获取父元素下的classname为cls的所有元素*/
  function getClass(parent,cls){
    var obj=parent.getElementsByTagName(&#39;*&#39;);
    var Clsarr=[];
    for(var i=0;i<obj.length;i++){
      if(obj[i].className==cls){
        Clsarr.push(obj[i]);
      }
    }
    return Clsarr;
  }
  /*获取arr数组中的最小值minH的Index值*/
  function getHIndex(arr,minH){
    for(var k=0;k<arr.length;k++){
      if(arr[k]==minH){
        return k;
      }
    }
  }
  /*判断当前滚动的高度时候大于最后的p出现在底部的高度值,即是否要加载*/
  function checkIsSlide(){
    var omain=document.getElementById(&#39;main&#39;);
    var obox=getClass(omain,&#39;box&#39;);
    var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    var documentH=document.documentElement.clientHeight;
    return (lastTop)<(scrollTop+documentH)?true:false;
  }
</script>

效果圖如下：

需要學習js的同學請關注php中文網js影片教學，眾多js線上影片教學可以免費觀看！

以上是分享JS實作瀑布流載入圖片效果碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。