瀑布流是當前一種比較流行的網站介面布局方式，參差不齊的多欄布局以及到達底部自動載入的方式，使網站在視覺和使用者體驗上都能得到較大的提升。最早使用此布局的是國外的圖片網站Pinterest，之後國內的一些圖片網站也開始使用瀑布流布局，包括和Pinterest類似的花瓣網、圖片社區lofter、美麗說、蘑菇街等等。
瀑布流在布局上對於大多數人來說應該是很簡單的，比較只有幾列而已。瀑布流最主要的還是資料的非同步載入。
首先說一下這次執行個體所用的瀑布流式方法。瀑布流布局實現的方法很多，具體可以自行百度，此處不再贅述。本文中瀑布流實現方法為四列布局（li*4），每個圖片為一個盒子（div>img+p），從後台讀取資料後賦值給盒子中的元素，判定此時高度最小的列（li），然後將盒子添加到對應的列（li），之後進行下一次判定，以此類推，直至本頁所有資料載入完成。
代碼部分：
html+css
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 1200px; margin: 0 auto; } ul li{ float: left; width: 250px; list-style: none; margin: 20px; } ul li div{ width: 250px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; border-radius: 5px; box-shadow: 2px 2px 10px #919B9C; } ul li img{ width: 100%; margin-bottom: 10px; } ul li p{ font-family: "microsoft yahei"; font-size: 14px; } </style> <script src="ajax.js" type="text/javascript" charset="utf-8"></script> <script src="pubuliu.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
javascript部分：ajax部分和實現部分
/** * * @param {Object} method get和post方式 * @param {Object} url 檔案路徑 * @param {Object} data 頁碼 * @param {Object} success 成功的函數 */ function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } if (method == 'get' && data) { url += '?' + data; } xhr.open(method,url,true); if (method == 'get') { xhr.send(); } else { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { success && success(xhr.responseText); console.log(xhr.responseText); } else { alert('出錯了,Err：' + xhr.status); } } } }
ajax部分是在之前所寫的Ajax工作原理以及函數的簡單封裝上修改而來，理解那個之後看這個基本沒難度。這個相對那個來說多了一個data參數，data是用來讀取資料的頁碼。
window.onload = function() { //擷取介面節點 var ul = document.getElementById('ul1'); var li = document.getElementsByTagName('li'); var liLen = li.length; var page = 1; var bool = false; //調用介面擷取資料 loadPage();//首次載入 /** * 載入頁面的函數 */ function loadPage(){ ajax('get', 'getPics.php', 'cpage='+page, function(data) { //將資料庫中擷取的資料轉換成數組形式，這裡要根據資料庫中的資料形式來寫，這裡我擷取到的是json形式 var data = JSON.parse(data); //將資料寫入到div中 for(var i = 0; i < data.length; i++) { var index = getShort(li);//尋找最短的li //建立新的節點：div>img+p var div = document.createElement('div'); var img = document.createElement('img'); img.src = data[i].preview;//img擷取圖片地址 img.alt = "等著吧..." //根據寬高比計算img的高，為了防止未載入時高度太低影響最短Li的判斷 img.style.height = data[i].height * (230 / data[i].width) + "px"; div.appendChild(img); var p = document.createElement('p'); p.innerHTML = data[i].title;//p擷取圖片標題 div.appendChild(p); //加入到最短的li中 li[index].appendChild(div); } bool = true;//載入完成設定開關，用於後面判斷是否載入下一頁 }); } window.onscroll = function (){ var index = getShort(li); var minLi = li[index]; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){ //開關為開，即上一頁載入完成，才能開始載入 if(bool){ bool = false; page++; loadPage(); } } } } /** * 擷取數組中高度最小的索引 * @param {Object} li 數組 */ function getShort(li) { var index = 0; var liHeight = li[index].offsetHeight; for(var i = 0; i < li.length; i++) { if(li[i].offsetHeight < liHeight) { index = i; liHeight = li[i].offsetHeight; } } return index; }
這部分的功能主要是動態將產生的div寫入到頁面中，其中包含對盒子樣式的修改和資料的寫入，資料通過ajax函數從伺服器端擷取。
需要注意的是：該執行個體的運行依賴於伺服器，所以需要在本地搭建一個簡單的伺服器，快速搭建可以使用WampService。
下面是我們資料來源的php代碼：
<?php header('Content-type:text/html; charset="utf-8"'); /* API: getPics.php 參數 cpage : 擷取資料的頁數 */ $cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1; $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage; $content = file_get_contents($url); $content = iconv('gbk', 'utf-8', $content); echo $content; ?>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
