用原生JavaScript實現圖片瀑布流的瀏覽效果

時間 2019-12-08

標籤原生 javascript 實現圖片瀑布瀏覽效果欄目 JavaScript 简体版

原文原文鏈接

學習JS，活躍思惟，靈活運用的一個較爲典型的學習案例。同一個瀑布流的效果但實現方式卻不少，利用遞歸、冒泡等等手法均可以達到你想要的目的。此次要說的就是利用相似遞歸來實現此效果的原創方案。此方案我的認爲難度係數較低php

  1 <?php
  2     //沒有數據源,利用遍歷對應文件夾中的全部的圖片獲得的數組模擬成數據源
  3     $arr = array();
  4     $dir = @opendir('images');
  5     while($file = @readdir($dir)){
  6         if($file == '.' || $file == '..'){
  7             continue;
  8         }
  9         $arr[] = $file;
 10     }
 11     @closedir($dir);
 12 ?>
 13 <!DOCTYPE html>
 14 <html>
 15     <head>
 16         <meta http-equiv="content-type" content="text/html; charset=utf-8">
 17         <title>瀑布流</title>
 18         <style type="text/css">
 19             *{padding:0;margin:0}
 20             .box{padding:5px;float:left;}
 21             .image{padding:5px;border:1px solid #ccc;box-shadow: 0 0 5px #ccc;border-radius:5px;}
 22             .image img{width:150px;height:auto;}
 23         </style>
 24     </head>
 25     <body>
 26         <div id="container" style="">
 27             <?php foreach($arr as $val):?>
 28             <div class="box">
 29                 <div class="image">
 30                     <img src="images/<?php echo $val?>" />
 31                 </div>
 32             </div>
 33             <?php endforeach;?>
 34         </div>
 35     </body>
 36     <script>
 37         window.onload = function(){
 38             imgLocation('container','box');
 39         }
 40         window.onresize = function(){
 41             imgLocation('container','box');
 42         }
 43         function imgLocation(parent,content){
 44             //取得大盒子的節點對象
 45             var cparent = document.getElementById(parent);
 46             //從大盒子中找到全部放圖片的盒子
 47             var ccontent = getChildElement(cparent,content);
 48             //因爲CSS已經規定全部Img的寬度爲150,因此這邊返回的圖片盒子的寬度就是150+5*2+5*2+2 = 172;
 49             var imgWidth = ccontent[0].offsetWidth;
 50             //利用body體寬度和圖片盒子所在寬度二者相除獲得目前寬度下第一排能擺放的最大個數
 51             var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
 52             //利用計算出來的一排最多的個數乘以每一個圖片的寬度獲得大盒子應有的寬度
 53             cparent.style.cssText = 'width:'+imgWidth*cols+'px;margin:0 auto;';
 54             console.log(cols);
 55             //定義用於存放第一排圖片盒子的高度所用的數組
 56             var BoxHeightArr = [];
 57             //循環遍歷全部圖片盒子
 58             for(var i=0;i<ccontent.length;i++){
 59                 //利用i的自增獲取第一排全部盒子的高度（這裏設計的很巧妙哦）
 60                 if(i<cols){
 61                     //將第一排全部盒子的高度追加到以前定義的數組
 62                     BoxHeightArr[i] = ccontent[i].offsetHeight;
 63                     //而且把第一排盒子全部的絕對定位去掉,否則在實時拉伸窗口的時候會破壞自適應
 64                     ccontent[i].style.position = '';
 65                 }else{
 66                     //循環完第一排時利用取到的高度數組從中獲取到最小高度
 67                     var minHeight = Math.min.apply(null,BoxHeightArr);
 68                     //自定義函數取得最小高度所在的盒子的位置(下標)
 69                     var minIndex = getminHeightLocation(BoxHeightArr,minHeight);
 70                     //修改第二排開始擺放的CSS，盒子定位修改爲絕對定位,爲後面的移動最準備
 71                     ccontent[i].style.position = 'absolute';
 72                     //把當前循環盒子的Y座標修改爲最小盒子的高度（這樣就可讓當前盒子排在第一排最小盒子的下面）
 73                     ccontent[i].style.top = minHeight + 'px';
 74                     //把當前循環盒子的X座標修改爲最小盒子所在位置的X座標（達到對齊效果）
 75                     ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';
 76                     //當本輪循環的修改操做所有完成後,更新第一排盒子高度的數組裏的最小高度
 77                     //如今最小盒子的高度應該是以前的高度加上第二排追加上來的盒子的高度
 78                     //以此循環操做全部的盒子就能實現瀑布流的效果
 79                     BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
 80                 }
 81             }
 82         }
 83         //如下開始是輔助部分，不一一贅述，上面是實現的核心，原理已經一一道明
 84         function getChildElement(parent,content){
 85             var contentArr = [];
 86             var allcontent = parent.getElementsByTagName('*');
 87             for(var i=0;i<allcontent.length;i++){
 88                 if(allcontent[i].className == content){
 89                     contentArr.push(allcontent[i]);
 90                 }
 91             }
 92             return contentArr;
 93         }
 94  
 95         function getminHeightLocation(BoxHeightArr,minHeight){
 96             for(var i=0;i<BoxHeightArr.length;i++){
 97                 if(BoxHeightArr[i] == minHeight){
 98                     return i;
 99                 }
100             }
101              
102         }
103          
104     </script>
105 </html>