人生就像一列開往墳墓的列車，路途上會有很多站，很難有人至始至終陪你走完全程，當陪你的人要下車時，即便不舍，也要心存感激，然后揮手告別。---sunnyhuang
以下放個人已經實現的頁面，轉載請著名作者
跨域請求數據和瀑布流布局
圖片木桶布局
懶加載代碼，需要開本地服務器
本地實現簡化版懶加載
是不是很想實現，小編用瘦小的身軀帶龐大的你們小飛一會。
懶加載
場景展示：當你在看一些新聞的網站的時候，網速如果慢的話，發現網站里面的很多圖片都是從白色之后才換成本身的圖片。這樣可以減少用戶的請求，減緩加載的負荷。
原理
- 只加載用戶看得到的圖片地址，其余的圖片用一個通用圖片展示（只起到占位的作用），主要思路：
- 利用元素的和窗口的關系。
window.height+scrollTop=obj.offsetTop - 利用自定義屬性來綁定元素的圖片地址。
data-src="真正的圖片地址" src="占位圖片的地址"
- 像圖片擺放網站，那么多圖片只有2個情況擺放圖片。
- 1.當用戶的屏幕滿足一定的條件后，向瀏覽器要一定的數據。拼接成字符串添加到頁面中。
- 2.直接加載自定義屬性中的值，讓圖片顯示出來
瀑布流布局（定寬不定高）
花瓣網的瀑布流布局
（手里拿著一大疊不同的人民幣不知道怎么豎著放好看，是不是很憂傷）
實現原理：就像你手里有一疊卡片，你想把它按照花瓣那樣的進行擺放，首先是擺放第一排的位置，但是你又不知道你要一行擺幾個，所以你就要得到你的容器的寬度和定的寬度，然后我們得到了一行擺放多少個，再想想，我知道一行的個數，我應該怎么才能完全的填充好呢？，所有我們定義一個數組來存放需要擺放的圖片，然后想想，如果要盡可能的填充空間，是不是需要每次都把下一個要擺放的卡片，擺在已經存放了的卡片的最小高度。依次這樣下去，不就是填充了最大空間？
代碼的分析
- 首先計算出一行可以擺放多少個元素（ct.width/item.width）
- 定義一個數組（長度是一行的個數），來填充需要放置的圖片
- 首先放置第一行的個數圖片后
- 獲取第一行圖片中的最小值以及索引，并遍歷所有的圖片，每次都放入到高度最小的數組值。等到圖片加載后，才能知道圖片的高度
- 通過定位來規定出圖片的位置，并把圖片的高度加上數組的最小值
- 可以優化，通過給已經判定好了的標簽添加自定義類，然后再篩選出已經放好了的標簽圖片
play()
$(window).on("resize",play)
//3. 獲取數組中的最小值和相應的索引，然后把元素放在相應的位置，并加上相應的高度
function play(){
//1.獲取元素的一行可以排多少個
var count=parseInt($(".ct").width()/$(".item").eq(0).outerWidth(true));
//2. 定義一個數組，填充數量的值,并初始化為0
var arr=[];
for(let i=0;i<count;i++){
arr[i]=0
}
$(".item").each(function(){
var minvalue=Math.min.apply(null,arr);
var index=arr.indexOf(minvalue);
$(this).css({
left: $(this).outerWidth(true)*index,
top: arr[index]
})
arr[index]+=$(this).outerHeight(true);
console.log(arr)
})
}
木桶布局（定高不定寬）
實現原理：給你一疊卡片讓你等高的橫向擺放出，是不是雙眼抹黑，誰這么變態的需求。首先是不是要自己規定一個高度，不能拉伸圖片，所以要計算出圖片的高寬，然后根據比例得到寬度。按照下面的思路來操作所有的圖片
- 需要得到所有的圖片
- 遍歷所有圖片，等到圖片加載后，得到圖片的高寬，然后根據比例得出我們已經規定高度后的寬度值ruleHeight（傳遞給下步width，height，目標）
- 處理每一張圖片，把每一張圖片的信息放在數組中，遍歷這個數組，得到已經存放的圖片width
- 把sumwidth和容器的寬度進行 比較，如果小于容器的寬度，就繼續存放圖片到數組中，如果大于容器的寬度后，需要記錄下最后一個lastimg被添加到數組中的元素，刪除最后一個被添加到數組的元素。
- 重新計算出元素的高度（便于全部填充容器），用得到已經存放到數組中的所有元素的寬度sumwidth-lastimg.width,得到已經存放到數組中的寬度。我們用容器的寬度ct.width/sumwidth*ruleHeight,得到可以填滿容器的新高度newHeight
- 擺放已經存放在數組中的圖片，并把新的寬度作為參數傳遞進去，最后我們把剛剛已經被刪除的lastimg繼續填充到數組中，作為下一次遍歷的第一個值
- 通過遍歷已經存放的數組圖片，已經字符串的拼接，渲染到頁面中，得到相應的效果。
//1. 生成一個構造函數來處理代碼
function Barrel($ct,num,height){
this.$ct=$ct;
this.imgCount=[];
this.num=num;
this.height=height;
this.loadimg();
}
Barrel.prototype={
loadimg:function () {
var cThis=this;
var imgs=this.getImgs(this.num);
$.each(imgs,function (index,el) {
//為每一個圖片生產一個對象
var img=new Image();
img.src=el;
//加載之后得到圖片的高度和寬度
img.onload=function () {
//var heigth=200; 設置一個初始高度
//console.log(img)
var imgInfo={
width: (img.width/img.height)*cThis.height,
height: cThis.height,
target: img //得到這個imgDOM對象
}
//加載每一個圖片后處理圖片
cThis.handle(imgInfo)
}
})
},
handle:function(imgInfo){
// console.log(imgInfo)
//定義一個數組存放圖片的寬度和容器比較大小
this.imgCount.push(imgInfo);
//console.log(this.imgCount)
var sumWidth=0;
var newImgHeight=0;
var lastImg=imgInfo;
for(var i=0;i<this.imgCount.length;i++) {
// sumWidth=sumWidth+imgInfo.width;
sumWidth = sumWidth + this.imgCount[i].width;
//console.log(sumWidth)
}
if(sumWidth>this.$ct.width()){
// console.log(sumWidth)
//刪除最后一個添加的數據
this.imgCount.pop();
// console.log(this.$ct)
//console.log(sumWidth)
sumWidth=sumWidth-lastImg.width;
newImgHeight=this.$ct.width()*this.height/sumWidth;
//console.log(newImgHeight)
this.putImg(newImgHeight);
this.imgCount=[];
this.imgCount.push(lastImg);
}
},
putImg:function(newImgHeight){
var $imgrow=$("<div class='img-row'></div>");
for(var i=0;i<this.imgCount.length;i++){
var $imgbox=$("<div class='img-box'></div>");
//console.log(this.imgCount[i].target)
var $img=$(this.imgCount[i].target);
$img.height(newImgHeight);
//console.log($img)
$imgbox.append($img)
$imgrow.append($imgbox)
}
this.$ct.append($imgrow)
},
getImgs:function (num) {
var width,height,color,urls=[];
for(var i=0;i<num;i++){
color=Math.random().toString(16).substring(2,8);
width=Math.floor(Math.random()*100+50);
height=Math.floor((Math.random()*30+50))
urls.push("http://placehold.it/" + width + "x" + height + "/" + color + "/fff")
}
return urls;
}
}
new Barrel($(".ct"),50,100)
懶加載結合瀑布流布局
我們經常看到一些網站新聞的加載，是通過在我們一邊滑動屏幕的時候一邊加載數據，展現給我們，今天我們來攻破他。
- 首先我們是沒有資源的，需要通過jsonp,cors,降域,postMessage()等通過跨域的方式來獲取
- 我們和后端規定出相應的接口和數據，例如我每次發送請求，傳遞給后端一個遞增page值，然后每一次后臺傳遞給我10條不同的數據。
- 有了這個規定，我們就可以在頁面上定下一個條件，當用戶做什么事情后去后端請求數據（滑動頁面，頁面中的一個不可見的元素出現在窗口中）
- 得到后端給我們的數據后，我們需要處理數據，把得到數據整體，變成一個DOM節點
- 得到一個個DOM節點集合后，遍歷這個類數組集合，當圖片加載后，把每一個DOM按照瀑布流的方式來實現擺放（會想到你手里有一疊卡片來讓你擺放的思路）
checkshow()
function checkshow(){
if(show($(".load"))){
getData()
}
}
function show($el){
var top=$el.offset().top;
var scr=$(window).scrollTop();
var winHeight=$(window).height()
if(top<scr+winHeight){
return true
}
else return false
}
var dataIsArrive=false;
var curPage=1;
var pageCount=10;
$(window).scroll(function(){
if(dataIsArrive) return
if(show($('.load'))){
console.log(111);
getData()
}
})
function getData(){
if(!dataIsArrive){
$.ajax({
method:"GET",
url:"http://platform.sina.com.cn/slide/album_tech",
dataType: "jsonp",
jsonp: "jsoncallback",
// http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4
data:{
app_key:"1271687855",
num:pageCount,
page:curPage
}
}).done(function(ret){
if(ret.status.code==='0'&&ret){
// console.log(ret.data)
place(ret.data) //得到了10條數據
curPage++
dataIsArrive=false
}
else{
console.log("沒有得到正確的數據")
}
})
}
dataIsArrive=true;
}
function place(data){
var $nodes=createDom(data); //d得到了10個li節點
$.each($nodes,function(index,ele){
var $node=$(ele);
$node.find("img").load(function(){
$("#pic-ct").append($node);
waterfallPlace($node)
})
})
}
function createDom($els){
var tpls="";
for(var i=0;i<$els.length;i++){
tpls+="<li class='item'>";
tpls+="<a href="+$els[i].url+">";
tpls+="";
tpls+="</a>"
tpls+="<h4 class='title'>"+$els[i].short_name+"</h4>"
tpls+="<p class='desp'>"+$els[i].short_intro+"</p>"
tpls+="</li>"
}
// console.log($(tpls))
return $(tpls)
//
}
