瀑布流效果在很多網站還是有的，這種錯落有致的排布看著還是很不錯的呢。今天我就來記錄一下關于用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); ?>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
