欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年09月18日 11:07:11   作者：JabinZhang  
這篇文章主要為大家詳細介紹了利用jquery實現(xiàn)瀑布流2種案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

我們逐步深入分析：

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

下面是script部分

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

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

繼續(xù)往下看：

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

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

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

繼續(xù)往下看：

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

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

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

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

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

主要包括，調用搜索引擎模板里獲取到的內容，綁定函數(shù)，轉換成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>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</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>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>內容內容內容內容內容內容內內容內容內容內內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</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ù)組存儲當前三個列的總高度
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    // 遍歷小格格
    $grids.each(function(){
     //找一下當前的最短列是誰
     var minValue = _.min(colHeight); //colHeight里面的最小的值！
     //看一下最短列出現(xiàn)在index幾的位置上
     var minIndex = _.indexOf(colHeight,minValue);//最短的值的下標
    // 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ā)的內容，使用jquery轉化成字符串
  var templateString = $("#grid_template").html();
  // 把轉化后的字符串綁定在compileFunction函數(shù)上!
  var compileFunction = _.template(templateString);//_.template（）返回的是一個函數(shù)！
  // console.log(typeof(compileFunction)); //function

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

  //三列瀑布流，每列的總高度
  var colHeight = [0,0,0];
  // 這是三列的高度數(shù)組，與里面的數(shù)值無關，表示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){ //輸出字符串 
    //轉為對象
    var dataObj = eval("(" + data + ")");  //解析ajax數(shù)據(jù)，轉換成對象！
    //沒有更多數(shù)據(jù)了
    // dataObj.news.length來自后臺json
    if(dataObj.news.length == 0){
     $loading.show().html("沒有更多了");
     return; //在這里截止后，lock也會截止
    }

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

      //讓大盒子根據(jù)最高的列設置高度
      $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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • JQuery獲取各種寬度、高度(format函數(shù))實例

    JQuery獲取各種寬度、高度(format函數(shù))實例

    本例除了使用標準的JQuery類庫外，還添加了自定義的函數(shù)來進行字符串的format操作。
    2013-03-03
  • jQuery實戰(zhàn)之仿淘寶商城左側導航效果

    jQuery實戰(zhàn)之仿淘寶商城左側導航效果

    網(wǎng)絡上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實現(xiàn)很簡單，確切的說是用jquery實現(xiàn)這個效果很簡單，這就是jquery的強大和魅力所在。
    2011-04-04
  • jQuery源碼分析之init的詳細介紹

    jQuery源碼分析之init的詳細介紹

    在閱讀本文之前，相信大家對 jQuery 的總體架構已經了解了，這一篇文章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-02-02
  • jQuery實現(xiàn)布局高寬自適應的簡單實例

    jQuery實現(xiàn)布局高寬自適應的簡單實例

    下面小編就為大家?guī)硪黄猨Query實現(xiàn)布局高寬自適應的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jQuery+ajax實現(xiàn)頂一下,踩一下效果

    jQuery+ajax實現(xiàn)頂一下,踩一下效果

    很多網(wǎng)站上面有頂一下，踩一下效果是直接用別人做好的插件放上去的，上星期正好要用到這個效果，就去研究了下。下面就一步一步來實現(xiàn)整個效果。。。。
    2010-07-07
  • 10個基于jQuery或JavaScript的WYSIWYG 編輯器整理

    10個基于jQuery或JavaScript的WYSIWYG 編輯器整理

    10驚人的自由豐富的文本編輯器，將提升您的網(wǎng)站的功能。我已經收集了5 jQuery和5個非jQuery實時評價附帶簡單的功能，具有辦公一樣的功能。
    2010-05-05
  • jquery.pager.js實現(xiàn)分頁效果

    jquery.pager.js實現(xiàn)分頁效果

    這篇文章主要為大家詳細介紹了jquery.pager.js實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-07-07
  • 基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果

    基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果

    這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)點擊小圖顯示大圖效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-05
  • jquery修改屬性值實例代碼(設置屬性值)

    jquery修改屬性值實例代碼(設置屬性值)

    jQuery attr()方法用于設置/改變屬性值，下面的例子演示如何改變（設置）鏈接中 href 屬性的值
    2014-01-01
  • Jquery實戰(zhàn)_讀書筆記1—選擇jQuery

    Jquery實戰(zhàn)_讀書筆記1—選擇jQuery

    近期公司積極組織我們這些開發(fā)人員學習進步，督促我們學習更多的技術來提高自己。為此我選擇了jQuery作為我學習的方向，同時我也是想將我的學習心得分享給大家，以后我會不斷的更新一系列jQuery方面的學習紀要，幫助大家學習。
    2010-01-01

最新評論