腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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

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

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

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

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

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

其實(shí)，在瀑布流里有個(gè)核心的功能就是用到了絕對(duì)定位

我們逐步深入分析：

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

下面是script部分

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

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

繼續(xù)往下看：

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

下面我們來(lái)主要看一下jquery的代碼：

好了，現(xiàn)在我們已經(jīng)通過(guò)兩種方式解決了瀑布流這個(gè)問(wèn)題，但是我們還有個(gè)問(wèn)題沒(méi)有解決，那就是做瀑布流很大的原因是因?yàn)閳D片的量比較大，我們一個(gè)一個(gè)寫(xiě)html是不是有點(diǎn)太low了！

繼續(xù)往下看：

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

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

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

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

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

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

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

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

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

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

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

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

第一種方法原碼：

<!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，看哪個(gè)列最矮，插入在哪個(gè)列</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(){
   //每個(gè)格格不一定往自己序號(hào)%3這個(gè)列插入，看哪個(gè)列目前最矮，插在哪里=
   //得到所有的grid
   $grids = $(".grid");  
    //用一個(gè)數(shù)組存儲(chǔ)當(dāng)前三個(gè)列的總高度
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    // 遍歷小格格
    $grids.each(function(){
     //找一下當(dāng)前的最短列是誰(shuí)
     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">
 // 定義變量和對(duì)象
  // 獲取引擎模板中發(fā)的內(nèi)容，使用jquery轉(zhuǎn)化成字符串
  var templateString = $("#grid_template").html();
  // 把轉(zhuǎn)化后的字符串綁定在compileFunction函數(shù)上!
  var compileFunction = _.template(templateString);//_.template（）返回的是一個(gè)函數(shù)！
  // console.log(typeof(compileFunction)); //function

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

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

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

  getJSONandRender(page);

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

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

 // 遍歷函數(shù)，動(dòng)態(tài)獲取下標(biāo)值根據(jù)絕對(duì)定位的位置進(jìn)行排列！
    _.each(dataObj.news,function(dictionary){ //每遍歷一次，執(zhí)行一次函數(shù)！     
     //這是系統(tǒng)內(nèi)置構(gòu)造函數(shù)
     var image = new Image(); //實(shí)例化一個(gè)對(duì)象分配內(nèi)存空間
     // 當(dāng)對(duì)象被實(shí)例化后，構(gòu)造函數(shù)會(huì)立即執(zhí)行它所包含的任何代碼
     image.src = dictionary.imgurl;
     //我們現(xiàn)在給image轉(zhuǎn)為jQuery對(duì)象，然后綁定事件
     $(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)聽(tīng)滾動(dòng)
  $(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>

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

您可能感興趣的文章: