人生就像一列开往坟墓的列车，路途上会有很多站，很难有人至始至终陪你走完全程，当陪你的人要下车时，即便不舍，也要心存感激，然后挥手告别。---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)
//
}
