什么是瀑布流？
瀑布流就是指按需加載。 也就是懶加載，而預加載是指事先加載好，需要的時候插入到指定的地方。
js/ajax.js
// ajax函數 用來與后端交互 （請求類型POST GET DELETE PUT HEAD, 請求地址， callback請求的回調函數，參數， 是否異步）
function ajax(method, url, callback, data, flag) {
// xhr 用來存儲請求與響應的信息
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
// 監聽數據請求狀態 監聽狀態readyState的變化
xhr.onreadystatechange = function() {
// 1 2 3
if(xhr.readyState == 4) {
// 4xx url data
if(xhr.status == 200) {
callback(xhr.responseText);
}else {
console.log('error');
}
}
}
method = method.toUpperCase();
// get 請求 把數據拼接在地址身上
if(method == 'GET') {
// 建立連接
xhr.open(method, url + '?' + data, flag);
// 發出請求
xhr.send();
// post 請求需要把數據放在請求體里面 不拼接地址
}else if(method == 'POST') {
// 建立連接
xhr.open(method, url, flag);
// 前端告訴后端 我的數據是什么格式的 key=value&key1=value1
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 傳遞數據 發出請求i
xhr.send(data);
}
}
./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>
<div class="item">
<img src="./image/0.png" alt="">
<p>lalalall </p>
</div>
</li>
<li>
<div class="item">
<img src="./image/1.png" alt="">
<p>text</p>
</div>
</li>
<li>
<div class="item">
<img src="./image/2.png" alt="">
<p>imgage2</p>
</div>
</li>
<li>
<div class="item">
<img src="./image/3.png" alt="">
<p>xxxxx</p>
</div>
</li>
</ul>
</div>
<script src="./js/ajax.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
data.json
[
{
"height":"1090",
"id":"662881",
"image":"http://www.wookmark.com/images/original/662881_wookmark.jpg",
"preview":"http://www.wookmark.com/images/thumbs/662881_wookmark.jpg",
"referer":"https://www.inspirationde.com/image/75082/",
"title":"Wicked November by Krzysztof Iwanski on Inspirationde",
"url":"http://www.wookmark.com/image/662881/wicked-november-by-krzysztof-iwanski-on-inspirationde",
"width":"770"
},
{
"height":"514",
"id":"654599",
"image":"http://www.wookmark.com/images/original/662880_wookmark.jpg",
"preview":"http://www.wookmark.com/images/thumbs/662880_wookmark.jpg",
"referer":"http://nofilmschool.com/2017/06/hackintosh-101-beginners-guide-to-building-your-own-4k-editing-machine",
"title":"Hackintosh 101: How to Build a 4K Editing Machine for Half the Purchase Price of a Mac",
"url":"http://www.wookmark.com/image/654599/hackintosh-101-how-to-build-a-4k-editing-machine-for-half-the-purchase-price-of-a-mac",
"width":"639"
}
]
./css/index.css
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrapper {
width: 80%;
margin: 0 auto;
border: 1px solid #000;
}
.wrapper ul {
overflow: hidden;
}
.wrapper ul li {
float: left;
width: 25%;
/* padding: 10px; */
/* box-sizing: border-box; */
}
.item {
margin: 10px;
}
.item img {
width: 100%;
}
.item p {
font-size: 14px;
}
./js/index.js
// 請求數據頁碼
var page = 1;
// 存儲頁面上的li
var oLi = document.getElementsByTagName('li');
// 每張圖片的寬度
var oDivWidth = document.getElementsByClassName('item')[0].offsetWidth;
console.log(oDivWidth);
// 請求結束 （當獲取數據為空的時候停止翻頁）
var flag = false;
// 獲取數據
function getData() {
ajax('GET', './data.json', function (res) {
// console.log(res);
var data = JSON.parse(res);
// 渲染頁面
renderDom(data);
if (!data.length || page == 5) {
flag = true;
}
}, 'page=' + page , true);
}
function renderDom(data) {
// 便利數據並插入到頁面中那個
for (var i = 0; i < data.length; i++) {
var minIndex = getMinLi().minIndex;
var oDiv = document.createElement('div');
oDiv.className = 'item';
var img = new Image();
img.src = data[i].image;
// 設置圖片高度 img.height 是真實頁面上圖片的高度 oDivWIdth是真實頁面上圖片的高度
// data[i].height/width 正常圖片的高度/寬度
// 圖片寬高比不變 a / b = c/ d ===> a = c / d * b = c * b / d
img.height = oDivWidth * data[i].height / data[i].width;
var oP = document.createElement('p');
oP.innerText = data[i].title;
oDiv.appendChild(img);
oDiv.appendChild(oP);
oLi[minIndex].appendChild(oDiv);
}
}
// 查找最短的li 返回最短li的索引值以及其高度
function getMinLi() {
// 最短li的索引值
var minIndex = 0;
// 最短li的高度
var minHeight = oLi[0].offsetHeight;
// 循環查找最短的li
for (var i = 0; i < oLi.length; i++) {
// 判斷最短的li並賦值
if (minHeight > oLi[i].offsetHeight) {
minHeight = oLi[i].offsetHeight;
minIndex = i;
}
}
return {
minIndex: minIndex,
minHeight: minHeight,
}
}
getData();
// 滑輪滾動事件
window.onscroll = function (e) {
var scrollTop = document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var minHeight = getMinLi().minHeight;
// 當滑輪滾動的距離+頁面的高度比最短列大時獲取數據
if (minHeight < scrollTop + clientHeight) {
if (!flag) {
page ++;
getData();
}
}
}
./image
0.png
1.png
2.png
3.png