原生js實現瀑布流以及載入效果——李帥醒部落格
阿新 • • 發佈：2019-01-26
今天教大家使用原生js實現瀑布流以及載入效果，下回再教大家使用使用原生JS實現響應式瀑布流佈局，還是先從簡單的入手！
1、首先列數是固定的，不同的是高度，隨機產生。
2、一排結束後，如第6個元素，是新增再上一排最短的位置，所以要做一個大小高度判斷。
3、每次滾動條觸發事件，載入新的元素（判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight）。
應用場景：瀑布流主要應用在圖片展示頁面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那麼就要給圖片規定一個寬度，解放它們的高度。利用網頁高度不限這個特性，充分利用頁面的空間，儘可能的展示多的圖片。瀑布流的實現方法挺多，但能做到響應式列數變化，自由佈局的並不多。如UC新聞頁面，百度圖片手機頁面、蘑菇街。
CSS頁面：
HTML頁面：*{ margin: 0px; padding: 0px; box-sizing:border-box; } body{ margin: 0px auto; width: 1100px; } ul{ margin-top: 10px; list-style: none; width: 200px; padding: 3px 3px 0px 3px; float: left; margin-left: 5px; } li{ width: 190px; background: yellow; padding: 3px; margin-bottom: 3px; border-radius: 5px; box-shadow: 10px 10px 10px #666; } </style>
<body>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</body><script type="text/javascript"> uls=document.querySelectorAll("ul"); var num=1; function statr(){ for(var i=0;i<30;i++){ //把4個ul的高度放到一個數組中 var ArrHeight=[uls[0].offsetHeight,uls[1].offsetHeight,uls[2].offsetHeight,uls[3].offsetHeight,uls[4].offsetHeight]; var index=mini(ArrHeight); CreateLi(uls[index],num++); } } statr(); //觸發滾動事件，繼續建立 window.onscroll=function(){ // html總高度-視覺化視窗高度=body的滾動高度,所以當滾動快要到達底部,還沒有到達的時候,再去執行函式,建立新的ul //相容新寫法 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; if(document.documentElement.offsetHeight-clientHeight<=scrollTop){ statr(); } } //建立li function CreateLi(ul,num){ var li=document.createElement("li"); li.style.height=rand()+"px"; li.innerHTML=num; li.style.background=randomColor(); ul.appendChild(li); } //獲取最小高度 function mini(arr){ var miniHeight=arr[0]; for(var i=0;i<arr.length;i++){ if(arr[i]<miniHeight){ miniHeight=arr[i]; } } //每次返回的都是最短ul的下標 return arr.indexOf(miniHeight); } //隨機高度 function rand() { return parseInt(Math.random() * 300) + 100; } //顏色隨機 function randomColor(){ var color = "rgb(" var r = parseInt(Math.random()*256); var g = parseInt(Math.random()*256); var b = parseInt(Math.random()*256); color = color+r+","+g+","+b+")"; return color; } </script>
