jquery實(shí)現(xiàn)瀑布流效果 jquery下拉加載新數(shù)據(jù)

更新時(shí)間：2016年12月12日 10:16:45 作者：my98800

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)瀑布流效果，下拉加載新數(shù)據(jù),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

瀑布流效果在很多網(wǎng)站還是有的，這種錯(cuò)落有致的排布看著還是很不錯(cuò)的呢。今天我就來記錄一下關(guān)于用jquery實(shí)現(xiàn)瀑布流效果的代碼；

一、頁面基本排版
1. items盒子主要用來存放我們需要擺放的數(shù)據(jù)item；
2. tips是頁面加載數(shù)據(jù)的時(shí)候用來提示用戶的文本；

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

二、css樣式(控制提示語句擺放的位置，還有數(shù)據(jù)展示的樣式)

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;
}

三、模版的引用（由于本例子中數(shù)據(jù)的展示樣式都一致，在這里我引用模版artTemplate）關(guān)

1. 記得要先引入這個(gè)模版的js包；
2. 定義模版的模塊要有一個(gè)id，還有設(shè)置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. 這里，我請(qǐng)求了兩個(gè)php分別返回了兩個(gè)模擬數(shù)據(jù)；

$(function() {
 //頁面一加載就出現(xiàn)的圖片，對(duì)應(yīng)實(shí)際百度圖片中點(diǎn)擊搜索圖片
 $.ajax({
  url: "./reset.php",
  dataType: "json",
  success: function(data) {
   var obj = {
    items: data
   };
   var result = template("template", obj);
   $(".items").html(result);
   waterfall();
  }
 });
});

// 編寫瀑布流js

function waterfall() {
 //計(jì)算出顯示盒子寬度
 var totalWidth = $(".items").width();
 //計(jì)算出單張圖片寬度（每張圖片寬度是一致的）
 var eachWidth = $(".items .item").width();
 //計(jì)算出一行能排布幾張圖片
 var columNum = Math.floor(totalWidth / eachWidth);
 //將剩余的空間設(shè)置成外邊距
 var margin = (totalWidth - eachWidth * columNum) / (columNum + 1);
 //定義一個(gè)數(shù)組用來填充高度值
 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({
   //注意點(diǎn)：這兒乘上的是最小值所在的索引idx
   left: margin + (margin + eachWidth) * minIndex,
   top: minValue
  });

  //重新計(jì)算高度，更新高度數(shù)組
  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);
   }
  });
 }
});

//判斷是否已經(jīng)到底部了
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;
 }
}

五、最后在這里奉上的是自定義模擬數(shù)據(jù)，以及簡單編寫的php返回?cái)?shù)據(jù)（別忘了，用此種方式獲取數(shù)據(jù)的話，需要開啟本地服務(wù)器哦～）；

如下為返回?cái)?shù)據(jù)的基本模式，如果想要定義多條數(shù)據(jù)，只要多復(fù)制幾條對(duì)象就可；

[
 {
  "path": "./images/1.jpg",
  "text": "中學(xué)時(shí)候我們班兩個(gè)同學(xué)打賭，內(nèi)容是在 廁所吃方便面，誰先吃完誰贏，輸了的請(qǐng) 贏了的吃一個(gè)月的飯，于是廁所里驚現(xiàn)兩 個(gè)貨蹲坑上吃泡面，這倆貨還沒有決出勝 負(fù)，旁邊拉屎的哥們都吐了三回了！?。?
 },
 {
  "path": "./images/2.jpg",
  "text": "親戚有許多好兄弟，平時(shí)戲稱為馬哥，牛哥，等等動(dòng)物名。一次，有人敲門，那時(shí)他兒子尚小，一開門，對(duì)著他爸媽就說：爸爸，媽媽，驢來了！"
 }
 ...
]

如下為php代碼：

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

//index.php 這里規(guī)定一次返回三條數(shù)據(jù)
<?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);
 ?>

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

您可能感興趣的文章: