利用jquery實現(xiàn)瀑布流3種案例

更新時間：2016年09月18日 11:07:11 作者：JabinZhang

這篇文章主要為大家詳細介紹了利用jquery實現(xiàn)瀑布流2種案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、瀑布流是我們常見的案例，這里主要講述，用jquery的方式實現(xiàn)瀑布流的功能！

引言：我們經(jīng)常見到很多網(wǎng)站的瀑布流功能，如淘寶、京東這些商品等等..

實現(xiàn)它我們首先考慮幾個問題：1、獲取到數(shù)據(jù) 2、排列的方式 3、如何實現(xiàn)排列

其實，在瀑布流里有個核心的功能就是用到了絕對定位

我們逐步深入分析：

這是html的布局，css布局可以自己設(shè)置，只要保證grid盒子有絕對定位，其父元素有相對定位即可！后面有參考代碼

下面是script部分

這種方式，可以通過for循環(huán)按照順序獲取圖片的索引值，然后不斷的更改其css樣式中的top值和left值！

在我們獲取圖片的資源時，有的時候圖片的高度是不一致的，如果一直按照順序排列，最后的圖片顯示，排列不整齊，就會效果不佳！

繼續(xù)往下看：

我們可以通過另一種方法，來實現(xiàn)圖片插入當(dāng)前列最短的一列，可以解決這個問題！

下面我們來主要看一下jquery的代碼：

好了，現(xiàn)在我們已經(jīng)通過兩種方式解決了瀑布流這個問題，但是我們還有個問題沒有解決，那就是做瀑布流很大的原因是因為圖片的量比較大，我們一個一個寫html是不是有點太low了！

繼續(xù)往下看：

下面介紹一種利用引擎模板來獲取json后臺的數(shù)據(jù)的方式，實現(xiàn)這個問題！

1、我們只需要搭建一個html盒子即可！

2、盒子搭建好了，數(shù)據(jù)要獲取啊，就靠它！

3、這是兩個js庫，在網(wǎng)上可下載到！

4、下面是具體的js部分，需要仔細分析了！

主要包括，調(diào)用搜索引擎模板里獲取到的內(nèi)容，綁定函數(shù)，轉(zhuǎn)換成jquery對象！

這一部分主要包括：通過ajax向json請求數(shù)據(jù)

這一部分主要包括：遍歷函數(shù)，進行尋找最短的列排列格子！

還有這一些，也是第四部分：

最后一步是：滾動的函數(shù)，這一部分建議使用console.log在后臺驗證一下，更容易理解！

雖然最后一種辦法麻煩，但是這一次完成，我們就可以使用很多次，并且自動獲取很多數(shù)據(jù)！

下面給大家附上原碼，大家好好測試一下，不要忘記更改圖片和路徑哦！

第一種方法原碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   /*height: 1000px;*/
   /*border: 1px solid red;*/
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
 </div>

 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //得到所有的grid
   $grids = $(".grid");

   //
   $grids.each(function(){
    var sum = 0;
    //遍歷它上面的人的總高度
    for(var i = $(this).index() - 3 ; i >= 0 ; i-=3){
     sum += $grids.eq(i).outerHeight() + 20;
    }
    console.log($(this).index());
    $(this).css({
     "top" : sum,
     "left" : ($(this).index() % 3) * 270
    })
   });
   }
 </script>
</body>
</html>

第二種方法原碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <h3>瀑布流的算法2，看哪個列最矮，插入在哪個列</h3>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  </div>
 </div>

 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //每個格格不一定往自己序號%3這個列插入，看哪個列目前最矮，插在哪里=
   //得到所有的grid
   $grids = $(".grid");  
    //用一個數(shù)組存儲當(dāng)前三個列的總高度
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    // 遍歷小格格
    $grids.each(function(){
     //找一下當(dāng)前的最短列是誰
     var minValue = _.min(colHeight); //colHeight里面的最小的值！
     //看一下最短列出現(xiàn)在index幾的位置上
     var minIndex = _.indexOf(colHeight,minValue);//最短的值的下標(biāo)
    // console.log(minIndex);
     $(this).css({
      "top" : minValue ,
      "left" : minIndex * 270
     });
     colHeight[minIndex] += $(this).outerHeight() + 20;
     // console.log(colHeight[minIndex]);
    })
   }
 </script>
</body>
</html>

第三種方法原碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
  .grid .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
  }
  .grid .neirong{
   line-height: 150%;
   font-size: 14px;
   margin-bottom: 20px;
  }
  .grid .zuozhe{
   float: right;
   color:orange;
   font-size: 12px;
  }
  .loading{
   margin: 0 auto;
   width: 400px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   background-color: gold;
   color:white;
  }
 </style>
</head>
<body>
 <div class="waterfall" id="waterfall">
  
 </div>
 <div class="loading">
  正在加載...
 </div>

 <script type="text/template" id="grid_template">
 
  <div class="grid">
   <img src="<%=imgurl%>" alt="" />
   <p class="title"><%=title%></p>
   <p class="neirong"><%=content%></p>
   <p class="zuozhe"><%=author%></p>
  </div>

 </script>

 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 
 <script type="text/javascript">
 // 定義變量和對象
  // 獲取引擎模板中發(fā)的內(nèi)容，使用jquery轉(zhuǎn)化成字符串
  var templateString = $("#grid_template").html();
  // 把轉(zhuǎn)化后的字符串綁定在compileFunction函數(shù)上!
  var compileFunction = _.template(templateString);//_.template（）返回的是一個函數(shù)！
  // console.log(typeof(compileFunction)); //function

  //轉(zhuǎn)換成jquery對象,為了后面使用jquery的方法
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");

  //三列瀑布流，每列的總高度
  var colHeight = [0,0,0];
  // 這是三列的高度數(shù)組，與里面的數(shù)值無關(guān)，表示index的順序
  // console.log(colHeight);

 // 獲取數(shù)據(jù)
  //信號量
  var page = 1;

  getJSONandRender(page);

  function getJSONandRender(page){
   // 為了增加用戶體驗
   $loading.show();

   //發(fā)出ajax請求
   $.get("json/json" + page + ".txt",function(data){ //輸出字符串 
    //轉(zhuǎn)為對象
    var dataObj = eval("(" + data + ")");  //解析ajax數(shù)據(jù)，轉(zhuǎn)換成對象！
    //沒有更多數(shù)據(jù)了
    // dataObj.news.length來自后臺json
    if(dataObj.news.length == 0){
     $loading.show().html("沒有更多了");
     return; //在這里截止后，lock也會截止
    }

 // 遍歷函數(shù)，動態(tài)獲取下標(biāo)值根據(jù)絕對定位的位置進行排列！
    _.each(dataObj.news,function(dictionary){ //每遍歷一次，執(zhí)行一次函數(shù)！     
     //這是系統(tǒng)內(nèi)置構(gòu)造函數(shù)
     var image = new Image(); //實例化一個對象分配內(nèi)存空間
     // 當(dāng)對象被實例化后，構(gòu)造函數(shù)會立即執(zhí)行它所包含的任何代碼
     image.src = dictionary.imgurl;
     //我們現(xiàn)在給image轉(zhuǎn)為jQuery對象，然后綁定事件
     $(image).load(function(){
      // console.log(dictionary.imgurl + "加載完畢");      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      //根據(jù)瀑布流算法，設(shè)置它的left、top
      // 最小值
      minValue = _.min(colHeight);
      // 最小值的位置！
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({
       "top" : minValue,
       "left" : minIndex * 270
      });
      //改變總列高數(shù)組的值
      colHeight[minIndex] += $grid.outerHeight() + 10;

      //讓大盒子根據(jù)最高的列設(shè)置高度
      $waterfall.css("height",_.max(colHeight));

      //隱藏loading文本
      $loading.hide();
     });
    });

    lock = true;
   });
  }

  var lock = true;
  //監(jiān)聽滾動
  $(window).scroll(function(){
   if(!lock) return;
   var rate = $(window).scrollTop() / ($(document).height() - $(window).height());

   if(rate >= 0.7){
    page ++;
    getJSONandRender(page);
    lock = false;
   }
  })
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: