人生就像一列開(kāi)往墳?zāi)沟牧熊?chē)，路途上會(huì)有很多站克握，很難有人至始至終陪你走完全程蕾管，當(dāng)陪你的人要下車(chē)時(shí)，即便不舍菩暗，也要心存感激掰曾，然后揮手告別。---sunnyhuang
以下放個(gè)人已經(jīng)實(shí)現(xiàn)的頁(yè)面停团，轉(zhuǎn)載請(qǐng)著名作者
跨域請(qǐng)求數(shù)據(jù)和瀑布流布局
圖片木桶布局
懶加載代碼旷坦，需要開(kāi)本地服務(wù)器
本地實(shí)現(xiàn)簡(jiǎn)化版懶加載
是不是很想實(shí)現(xiàn)，小編用瘦小的身軀帶龐大的你們小飛一會(huì)佑稠。
懶加載
場(chǎng)景展示：當(dāng)你在看一些新聞的網(wǎng)站的時(shí)候秒梅，網(wǎng)速如果慢的話，發(fā)現(xiàn)網(wǎng)站里面的很多圖片都是從白色之后才換成本身的圖片舌胶。這樣可以減少用戶的請(qǐng)求捆蜀，減緩加載的負(fù)荷。
原理
- 只加載用戶看得到的圖片地址幔嫂，其余的圖片用一個(gè)通用圖片展示（只起到占位的作用）辆它，主要思路：
- 利用元素的和窗口的關(guān)系。
window.height+scrollTop=obj.offsetTop - 利用自定義屬性來(lái)綁定元素的圖片地址履恩。
data-src="真正的圖片地址" src="占位圖片的地址"
- 個(gè)人總結(jié)：變相的懶加載 類(lèi)似于懶加載原理
圖片的擺放
- 像圖片擺放網(wǎng)站娩井，那么多圖片只有2個(gè)情況擺放圖片。
- 1.當(dāng)用戶的屏幕滿足一定的條件后似袁，向?yàn)g覽器要一定的數(shù)據(jù)洞辣。拼接成字符串添加到頁(yè)面中。
- 2.直接加載自定義屬性中的值昙衅，讓圖片顯示出來(lái)
瀑布流布局（定寬不定高）
花瓣網(wǎng)的瀑布流布局
（手里拿著一大疊不同的人民幣不知道怎么豎著放好看扬霜，是不是很憂傷）
實(shí)現(xiàn)原理：就像你手里有一疊卡片，你想把它按照花瓣那樣的進(jìn)行擺放而涉，首先是擺放第一排的位置著瓶，但是你又不知道你要一行擺幾個(gè)，所以你就要得到你的容器的寬度和定的寬度啼县，然后我們得到了一行擺放多少個(gè)材原，再想想，我知道一行的個(gè)數(shù)季眷，我應(yīng)該怎么才能完全的填充好呢余蟹？，所有我們定義一個(gè)數(shù)組來(lái)存放需要擺放的圖片子刮，然后想想威酒，如果要盡可能的填充空間窑睁，是不是需要每次都把下一個(gè)要擺放的卡片葵孤，擺在已經(jīng)存放了的卡片的最小高度。依次這樣下去尤仍，不就是填充了最大空間箫津？
代碼的分析
- 首先計(jì)算出一行可以擺放多少個(gè)元素（ct.width/item.width）
- 定義一個(gè)數(shù)組（長(zhǎng)度是一行的個(gè)數(shù)）宰啦，來(lái)填充需要放置的圖片
- 首先放置第一行的個(gè)數(shù)圖片后
- 獲取第一行圖片中的最小值以及索引苏遥，并遍歷所有的圖片绑莺，每次都放入到高度最小的數(shù)組值。等到圖片加載后欺缘，才能知道圖片的高度
- 通過(guò)定位來(lái)規(guī)定出圖片的位置，并把圖片的高度加上數(shù)組的最小值
- 可以優(yōu)化，通過(guò)給已經(jīng)判定好了的標(biāo)簽添加自定義類(lèi)剿干，然后再篩選出已經(jīng)放好了的標(biāo)簽圖片
play()
$(window).on("resize",play)
//3. 獲取數(shù)組中的最小值和相應(yīng)的索引置尔，然后把元素放在相應(yīng)的位置，并加上相應(yīng)的高度
function play(){
//1.獲取元素的一行可以排多少個(gè)
var count=parseInt($(".ct").width()/$(".item").eq(0).outerWidth(true));
//2. 定義一個(gè)數(shù)組，填充數(shù)量的值,并初始化為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)
})
}
木桶布局（定高不定寬）
利用木桶布局和懶加載實(shí)現(xiàn)的圖片網(wǎng)站
實(shí)現(xiàn)原理：給你一疊卡片讓你等高的橫向擺放出，是不是雙眼抹黑犀被，誰(shuí)這么變態(tài)的需求。首先是不是要自己規(guī)定一個(gè)高度西轩，不能拉伸圖片脑沿，所以要計(jì)算出圖片的高寬，然后根據(jù)比例得到寬度溶弟。按照下面的思路來(lái)操作所有的圖片
- 需要得到所有的圖片
- 遍歷所有圖片辜御，等到圖片加載后，得到圖片的高寬，然后根據(jù)比例得出我們已經(jīng)規(guī)定高度后的寬度值ruleHeight（傳遞給下步width纳鼎，height姨谷，目標(biāo)）
- 處理每一張圖片梦湘，把每一張圖片的信息放在數(shù)組中引有，遍歷這個(gè)數(shù)組倦逐，得到已經(jīng)存放的圖片width
- 把sumwidth和容器的寬度進(jìn)行 比較，如果小于容器的寬度抒巢，就繼續(xù)存放圖片到數(shù)組中悦陋，如果大于容器的寬度后幸逆，需要記錄下最后一個(gè)lastimg被添加到數(shù)組中的元素还绘，刪除最后一個(gè)被添加到數(shù)組的元素。
- 重新計(jì)算出元素的高度（便于全部填充容器）拍顷，用得到已經(jīng)存放到數(shù)組中的所有元素的寬度sumwidth-lastimg.width,得到已經(jīng)存放到數(shù)組中的寬度昔案。我們用容器的寬度ct.width/sumwidth*ruleHeight,得到可以填滿容器的新高度newHeight
- 擺放已經(jīng)存放在數(shù)組中的圖片，并把新的寬度作為參數(shù)傳遞進(jìn)去拼缝，最后我們把剛剛已經(jīng)被刪除的lastimg繼續(xù)填充到數(shù)組中猪叙，作為下一次遍歷的第一個(gè)值
- 通過(guò)遍歷已經(jīng)存放的數(shù)組圖片芒帕，已經(jīng)字符串的拼接刑枝，渲染到頁(yè)面中柜某，得到相應(yīng)的效果翰绊。
//1. 生成一個(gè)構(gòu)造函數(shù)來(lái)處理代碼
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) {
//為每一個(gè)圖片生產(chǎn)一個(gè)對(duì)象
var img=new Image();
img.src=el;
//加載之后得到圖片的高度和寬度
img.onload=function () {
//var heigth=200; 設(shè)置一個(gè)初始高度
//console.log(img)
var imgInfo={
width: (img.width/img.height)*cThis.height,
height: cThis.height,
target: img //得到這個(gè)imgDOM對(duì)象
}
//加載每一個(gè)圖片后處理圖片
cThis.handle(imgInfo)
}
})
},
handle:function(imgInfo){
// console.log(imgInfo)
//定義一個(gè)數(shù)組存放圖片的寬度和容器比較大小
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)
//刪除最后一個(gè)添加的數(shù)據(jù)
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)
懶加載結(jié)合瀑布流布局
我們經(jīng)常看到一些網(wǎng)站新聞的加載润绎，是通過(guò)在我們一邊滑動(dòng)屏幕的時(shí)候一邊加載數(shù)據(jù)，展現(xiàn)給我們，今天我們來(lái)攻破他。
- 首先我們是沒(méi)有資源的伯病，需要通過(guò)jsonp,cors,降域,postMessage()等通過(guò)跨域的方式來(lái)獲取
- 我們和后端規(guī)定出相應(yīng)的接口和數(shù)據(jù)季研，例如我每次發(fā)送請(qǐng)求，傳遞給后端一個(gè)遞增page值，然后每一次后臺(tái)傳遞給我10條不同的數(shù)據(jù)恳守。
- 有了這個(gè)規(guī)定，我們就可以在頁(yè)面上定下一個(gè)條件，當(dāng)用戶做什么事情后去后端請(qǐng)求數(shù)據(jù)（滑動(dòng)頁(yè)面，頁(yè)面中的一個(gè)不可見(jiàn)的元素出現(xiàn)在窗口中）
- 得到后端給我們的數(shù)據(jù)后范抓，我們需要處理數(shù)據(jù)象泵，把得到數(shù)據(jù)整體春寿，變成一個(gè)DOM節(jié)點(diǎn)
- 得到一個(gè)個(gè)DOM節(jié)點(diǎn)集合后，遍歷這個(gè)類(lèi)數(shù)組集合造壮，當(dāng)圖片加載后硝全，把每一個(gè)DOM按照瀑布流的方式來(lái)實(shí)現(xiàn)擺放（會(huì)想到你手里有一疊卡片來(lái)讓你擺放的思路）
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條數(shù)據(jù)
curPage++
dataIsArrive=false
}
else{
console.log("沒(méi)有得到正確的數(shù)據(jù)")
}
})
}
dataIsArrive=true;
}
function place(data){
var $nodes=createDom(data); //d得到了10個(gè)li節(jié)點(diǎn)
$.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)
//
}
