jquery實現瀑布流效果 jquery下拉載入新資料_javascript技巧

瀑布流效果在很多網站還是有的，這種錯落有致的排布看著還是很不錯的呢。今天我就來記錄一下關於用jquery實現瀑布流效果的代碼；

一、頁面基本排版
1. items盒子主要用來存放我們需要擺放的資料item；
2. tips是頁面載入資料的時候用來提示使用者的文本；

 <div class="wrapper">  <div class="items">   <div class="item"></div>  </div>  <p class="tips loading">正在載入...</p> </div>

二、css樣式(控制提示句擺放的位置，還有資料展示的樣式)

body {  text-align: center;  margin: 0;  padding: 0;  background-color: #F7F7F7;  font-family: '微軟雅黑';}.wrapper {  padding: 50px;}img {  display: block;  width: 100%;  height: 300px;}.items {  position: relative;  padding-bottom: 10px;}.item {  width: 228px;  position: absolute;  border: 1px solid #ddd;}.tips {  width: 280px;  height: 40px;  margin: 30px auto 0;  text-align: center;  line-height: 40px;  background-color: #CCC;  border-radius: 6px;  font-size: 16px;  cursor: pointer;  position: fixed;  bottom: 0px;  left: 50%;  margin-left: -140px;  opacity: 0;  color: #666;}.tips.loading {   /*background-color: transparent;*/  background-color: #dadada;}

三、模版的引用（由於本例子中資料的展示樣式都一致，在這裡我引用模版artTemplate）關

1. 記得要先引入這個模版的js包；
2. 定義模版的模組要有一個id，還有設定type；

 <script src="../js/template_native.js"></script> <script type="text/html" id="template">  <% for(var i = 0; i < items.length; i++){ %>   <div class='item'>    <img src="<%=items[i].path%>" alt="">    <p>     <%=items[i].text%>    </p>   </div>   <% } %> </script>

四、js控制瀑布流的效果

1. 這裡，我請求了兩個php分別返回了兩個類比資料；

$(function() { //頁面一載入就出現的圖片，對應實際百度圖片中點擊搜尋圖片 $.ajax({  url: "./reset.php",  dataType: "json",  success: function(data) {   var obj = {    items: data   };   var result = template("template", obj);   $(".items").html(result);   waterfall();  } });});// 編寫瀑布流jsfunction waterfall() { //計算出顯示盒子寬度 var totalWidth = $(".items").width(); //計算出單張圖片寬度（每張圖片寬度是一致的） var eachWidth = $(".items .item").width(); //計算出一行能排布幾張圖片 var columNum = Math.floor(totalWidth / eachWidth); //將剩餘的空間設定成外邊距 var margin = (totalWidth - eachWidth * columNum) / (columNum + 1); //定義一個數組用來填充高度值 var heightArr = []; for (var i = 0; i < columNum; i++) {  heightArr[i] = 0; } //擺放位置 擺放在最小高度處 var elementItems = $(".items .item"); elementItems.each(function(idx, ele) {  //取得一行中高度最小值及其索引  //定義初始的最小值及其索引值  var minIndex = 0;  var minValue = heightArr[minIndex];  for (var i = 0; i < heightArr.length; i++) {   if (heightArr[i] < minValue) {    minIndex = i;    minValue = heightArr[i];   }  }  $(ele).css({   //注意點：這兒乘上的是最小值所在的索引idx   left: margin + (margin + eachWidth) * minIndex,   top: minValue  });  //重新計算高度，更新高度數組  var oldHeight = heightArr[minIndex];  oldHeight += $(ele).height() + margin;  heightArr[minIndex] = oldHeight; }); return heightArr;}$(window).on("scroll", function() { if (toBottom()) {  $(".tips").css("opacity", 1);  $.ajax({   url: "./index.php",   dataType: "json",   success: function(data) {    var dataItem = {     items: data    };    var res = template("template", dataItem);    $(".items").append(res);    waterfall();    $(".tips").css("opacity", 0);   }  }); }});//判斷是否已經到底部了function toBottom() { var scrollTop = $(window).scrollTop(); var clientHeight = $(window).height(); var offsetTop = $(".items .item:last-child").offset().top; console.log(scrollTop + "..." + clientHeight + "..." + offsetTop); if (scrollTop + clientHeight > offsetTop) {  return true; } else {  return false; }}

五、最後在這裡奉上的是自訂類比資料，以及簡單編寫的php返回資料（別忘了，用此種方式擷取資料的話，需要開啟本機伺服器哦～）；

如下為返回資料的基本模式，如果想要定義多條資料，只要多複製幾條對象就可；

[ {  "path": "./images/1.jpg",  "text": "中學時候我們班兩個同學打賭，內容是在 廁所吃即食麵，誰先吃完誰贏，輸了的請 贏了的吃一個月的飯，於是廁所裡驚現兩 個貨蹲坑上吃泡麵，這倆貨還沒有決出勝 負，旁邊拉屎的哥們都吐了三回了！！！" }, {  "path": "./images/2.jpg",  "text": "親戚有許多好兄弟，平時戲稱為馬哥，牛哥，等等動物名。一次，有人敲門，那時他兒子尚小，一開門，對著他爸媽就說：爸爸，媽媽，驢來了！" } ...]

如下為php代碼：

//reset.php<?php $jsonString = file_get_contents('info/reset.json'); $totalArr = json_decode($jsonString); echo json_encode($totalArr); ?>

//index.php 這裡規定一次返回三條資料<?php $jsonString = file_get_contents('info/data.json'); $totalArr = json_decode($jsonString); $randomKeyArr = array_rand($totalArr,3); $templateArr = array(); for ($i=0; $i <count($randomKeyArr) ; $i++) {   $currentKey = $randomKeyArr[$i];   $currentObj = $totalArr[$currentKey];   $templateArr[$i] = $currentObj; } echo json_encode($templateArr); ?>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。