```
<!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>
<style>
* {
margin: 0;
padding: 0
}
#container {
width: 1000px;
border: 1px solid red;
margin: 50px auto 0;
position: relative;
}
#container img {
position: absolute;
}
#loader {
width: 100%;
height: 60px;
background: no-repeat center pink;
position: fixed;
bottom: 0;
left: 0
}
</style>
<script src='jquery-2.0.3.js'></script>
<script>
$(function () {
//計算列
var oContainer = $('#container');
var oLoader = $('#loader');
var iWidth = 200; //列寬
var iSpace = 10; //間隔寬
var iOuterWidth = iWidth + iSpace; //實際寬
var iCells = 0; //總列
var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';
var iPage = 0;
var iBtn = true;
var arrT = [];
var arrL = [];
function setCells() {
iCells = Math.floor($(window).innerWidth() / iOuterWidth);
if(iCells<3)iCells=3;
if(iCells>6)iCells=6;
document.title = iCells;
oContainer.css('width', iOuterWidth * iCells - iSpace);
}
setCells();
for (var i = 0; i < iCells; ++i) {
arrT.push(0);
arrL.push(i * iOuterWidth);
}
// console.log(arrL);
function getData(){
iBtn = false;
oLoader.show();
$.getJSON(sUrl, `page=${iPage}`, function (data) {
// console.log(data);
$.each(data, function (index, obj) {
var oImg = $('<img/>');
oImg.attr('src', obj.preview);
oContainer.append(oImg);
var iHeight = iWidth / obj.width * obj.height; //不通過oImg.height()來獲取的原因在于圖片可能還沒加載完 那么數值就會不正確
// console.log(iHeight)
oImg.css({
width:iWidth
,height:iHeight
});
//獲取arrT最小值所在的位置
var iMinIndex = getMin();
// console.log(iMinIndex)
// console.log(arrL)
//設置定位
oImg.css({
left: arrL[iMinIndex]
, top: arrT[iMinIndex]
});
arrT[iMinIndex] += iHeight + 10;
// console.log(arrT)
});
oLoader.hide();
iBtn = true;
});
}
getData();
$(window).on('scroll',function(){
var iH = $(window).scrollTop()+$(window).innerHeight(); //視口下沿距離文檔頂部的位置
var iMinIndex = getMin();
if(arrT[iMinIndex] + oContainer.offset().top<iH){//滾動到 最短的那一列已經出現空白時 就加載
if(iBtn){
iPage++;
getData();
}
}
})
$(window).on('resize',function(){
var iOldCells = iCells;
setCells();
if(iOldCells == iCells)return;
//resize還要檢測 列變化后是否出現空白 出現的話就要加載更多
var iH = $(window).scrollTop()+$(window).innerHeight(); //視口下沿距離文檔頂部的位置
var iMinIndex = getMin();
if(arrT[iMinIndex] + oContainer.offset().top<iH){//滾動到 最短的那一列已經出現空白時 就加載
if(iBtn){
iPage++;
getData();
}
}
//異步問題?
arrT = [];
arrL = [];
for(var i=0;i<iCells;++i){
arrT.push(0);
arrL.push(i * iOuterWidth);
}
var aImgs = oContainer.find('img');
aImgs.each(function(index,obj){
var iMinIndex = getMin();
// $(this).css({
// left: arrL[iMinIndex]
// , top: arrT[iMinIndex]
// });
$(this).animate({
left:arrL[iMinIndex]
,top:arrT[iMinIndex]
})
arrT[iMinIndex] += $(this).height() + 10;
});
})
function getMin() {
var iv = arrT[0];
var _index = 0;
for (var i = 1; i < arrT.length; ++i) {
if (arrT[i] < iv) {
iv = arrT[i];
_index = i;
}
}
return _index;
}
})
</script>
</head>
<body>
<div id="container"></div>
<div id="loader"></div>
</body>
</html>
```
- 空白目錄
- window
- location
- history
- DOM
- 什么是DOM
- JS盒子模型
- 13個核心屬性
- DOM優化
- 回流與重繪
- 未整理
- 文檔碎片
- DOM映射機制
- DOM庫封裝
- 事件
- 功能組件
- table
- 圖片延遲加載
- 跑馬燈
- 回到頂部
- 選項卡
- 鼠標跟隨
- 放大鏡
- 搜索
- 多級菜單
- 拖拽
- 瀑布流
- 數據類型的核心操作原理
- 變量提升
- 閉包(scope)
- this
- 練習題
- 各種數據類型下的常用方法
- JSON
- 數組
- object
- oop
- 單例模式
- 高級單例模式
- JS中常用的內置類
- 基于面向對象創建數據值
- 原型和原型鏈
- 可枚舉和不可枚舉
- Object.create
- 繼承的六種方式
- ES6下一代js標準
- babel
- 箭頭函數
- 對象
- es6勉強筆記
- 流程控制
- switch
- Ajax
- eval和()括號表達式
- 異常信息捕獲
- 邏輯與和或以及前后自增
- JS中的異步編程思想
- 上云
- 優化技巧
- 跨域與JSONP
- 其它跨域相關問題
- console
- HTML、XHTML、XML
- jQuery
- zepto
- 方法重寫和方法重載
- 移動端
- 響應式布局開發基礎
- 項目一:創意簡歷