一.知識(shí)補(bǔ)充：
當(dāng)我們用 Ajax 來(lái)請(qǐng)求數(shù)據(jù)的時(shí)候我磁，如果請(qǐng)求的文件是 json 且里面的數(shù)據(jù)也是標(biāo)準(zhǔn) JSON 格式滋尉，類(lèi)似發(fā)出這樣的請(qǐng)求拧揽。
$.get("a.json",function(data){alert(typeof data);});
這時(shí)瀏覽器彈出的內(nèi)容是 object 休里。請(qǐng)求的數(shù)據(jù)器類(lèi)型是對(duì)象富腊，這沒(méi)什么問(wèn)題坏逢，但是如果我們請(qǐng)求文件類(lèi)型是 TXT 或 PHP 等等類(lèi)型的，即使文件里面的內(nèi)容是標(biāo)準(zhǔn)的 JSON 格式赘被，但是請(qǐng)求文件返回?cái)?shù)據(jù)類(lèi)型已經(jīng)由 object 改變 為 string 是整。我們來(lái)對(duì)比實(shí)驗(yàn)一下。
$.get("a.txt",function(data){alert(typeof data);});
雖然文件里面的數(shù)據(jù)和 a.json 里面的數(shù)據(jù)一樣民假，都是：
{
"data":{
"age":12
}
}
這時(shí)瀏覽器會(huì)彈出 string浮入。這說(shuō)明如果我們請(qǐng)求的不是 JSON 文件，且文件里面也是標(biāo)準(zhǔn) JOSN羊异，這時(shí)我們就不能打點(diǎn)調(diào)用 json 里面的數(shù)據(jù)事秀。必須它轉(zhuǎn)化成 object。轉(zhuǎn)化方法有三種：
- 方法1：eval語(yǔ)句
eval 語(yǔ)句很神奇野舶，能夠識(shí)別字符串易迹，并把字符串當(dāng)做 JS 語(yǔ)句執(zhí)行。
var a = "alert(1+2+3)";
eval(a);//結(jié)果計(jì)算為六
真正的作用是把 json 由 string 變?yōu)?object平道。
//必須加左右括號(hào)睹欲，不然瀏覽器認(rèn)為{}結(jié)束了
var json = eval("(" + data + ")");
console.log(json);
- 方法2：new Function()
var fun = new Function("return" +data);
fun();
- 方法3：JSON.parse()內(nèi)置函數(shù)
JSON對(duì)象注意，不是一個(gè)構(gòu)造函數(shù)一屋，就是一個(gè)內(nèi)置對(duì)象窘疮。這個(gè)對(duì)象有兩個(gè)方法
JSON.parse : 字符串 → JSON
JSON.stringify ： JSON → 字符串
var obj = JSON.parse(data);
alert(obj.result.name);
二、.瀑布流原理
瀑布流原理：
實(shí)現(xiàn)的辦法主要是使用定位技術(shù)（position）來(lái)改變每個(gè)小網(wǎng)格 grid 位置冀墨。我們要做的是一個(gè)三列的瀑布流闸衫，只要考慮怎么得到網(wǎng)格的具體位置（top 和 left 值）。
當(dāng)我們$("#waterfall").append(domstring);節(jié)點(diǎn)上樹(shù)的時(shí)候诽嘉，因?yàn)?grid 絕對(duì)定位了蔚出，所以所有的網(wǎng)格 grid 會(huì)落在一起疫蔓，這時(shí)我們要有序的把他們分開(kāi)。
我們先去遍歷每個(gè)網(wǎng)格身冬，得到網(wǎng)格 grid 后衅胀，去不斷計(jì)算元素上一列的盒子高，把它們累加在一起就是現(xiàn)在這個(gè)元素的top值酥筝。
至于元素的 left 值滚躯，就是元素 index 編號(hào)求余列數(shù)乘以盒子的寬。$(this).index() % 3) * 270
$(".grid").each(function(){
var sum = 0;
for(var i = $(this).index()-3;i>=0;i-=3){
sum += $(".grid").eq(i).outerHeight()+20;
console.log(sum);
}
$(this).css({
"top" : sum,
"left" : ($(this).index() % 3) * 270
});
瀑布流原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)現(xiàn)瀑布流</title>
<style>
*{margin:0;padding:0;}
.waterfall {
width: 790px;
margin: 0 auto;
position: relative;
background-color: #eabbbb;
}
.waterfall .grid img {
width: 230px;
border-radius: 10px;
box-shadow: 2px 2px 3px #333;
}
.waterfall .grid {
width: 230px;
position: absolute;
border-radius: 8px;
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);
}
.waterfall .grid p {
overflow: hidden;
padding: 0 10px;
}
.waterfall .grid .title {
line-height: 25px;
font-size: 14px;
float: left;
}
.waterfall .grid .author {
line-height: 25px;
font-size: 14px;
float: right;
}
.waterfall .grid .content {
line-height: 25px;
color: #93999f;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 引包 -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/underscore.js"></script>
<!-- HTML結(jié)構(gòu)的搭建 -->
<div class="waterfall" id="waterfall">
<!-- 此處放入模板template -->
</div>
<!-- 模板使用underscore的template函數(shù)讀取json填入數(shù)據(jù) -->
<script type="text/template" id="telt">
<div id ="test" class="grid">
<img src="<%=imgurl%>" alt="">
<p>
<span class="title"><%=title%></span>
<span class="author"><%=author%></span>
</p>
<p class="content"><%=content%></p>
</div>
</script>
<script>
// 得到模板標(biāo)簽
var templateString = $("#telt").html();
// 模板綁定解析
var complieFunction = _.template(templateString);
// Ajax請(qǐng)求數(shù)據(jù)
$.get("json/json1.txt",function(data){
//請(qǐng)求不是json結(jié)尾的文件嘿歌，類(lèi)型為string
console.log(typeof data);
//轉(zhuǎn)化為object對(duì)象
var data = eval("("+ data +")");
console.log(typeof data);
// 使用underscore遍歷眼拿到的數(shù)據(jù)
_.each(data.news,function(dictionary){
// 把拿到的json放到模板里
var domstring = complieFunction(dictionary);
// 把模板添加到事先準(zhǔn)備的地方里
$("#waterfall").append(domstring);
//此步?jīng)]任何作用掸掏，就是驗(yàn)證模板template里不能用id，只能用類(lèi)class宙帝。
//改變網(wǎng)格的背景丧凤，沒(méi)任何作用也不報(bào)錯(cuò)。
$("test").css("background-color","red");
$(".grid").each(function(){
var sum = 0;
for(var i = $(this).index()-3;i>=0;i-=3){
sum += $(".grid").eq(i).outerHeight()+20;
console.log(sum);
}
$(this).css({
"top" : sum,
"left" : ($(this).index() % 3) * 270
});
});
});
});
</script>
</body>
</html>
思考：相信大家也看到了步脓，最后結(jié)尾的時(shí)候三列因?yàn)樾【W(wǎng)格的長(zhǎng)短不一愿待，但是編號(hào)位置是固定的，導(dǎo)致長(zhǎng)的太長(zhǎng)短的太短靴患。接下來(lái)仍侥，我們考慮怎么讓后面盡量平齊，對(duì)齊的方法不在采用固定式的位置填充鸳君，采用誰(shuí)的位置空白（空白處離瀏覽器上端距離最短）农渊，卡片就自動(dòng)填到那個(gè)空白的地方。
三.自動(dòng)瀑布流
為了解決固定位置瀑布流的不雅觀或颊，我們把它變成自動(dòng)瀑布流砸紊。
var col_height = [0,0,0];
// 遍歷小格格
$(".grid").each(function(){
//得到數(shù)組中最小的那個(gè)數(shù)
var min_value = _.min(col_height);
//看一下最短列出現(xiàn)在index幾的位置上
var min_index = _.indexOf(col_height,min_value);
$(this).css({
"top" : min_value,
"left" : min_index*270
});
// 更新數(shù)字中最小的數(shù)，接著進(jìn)行下次計(jì)算
col_height[min_index] += $(this).outerHeight()+20;
});
自動(dòng)瀑布流
本來(lái)數(shù)字是
678 現(xiàn)在數(shù)字786 完全是自適應(yīng)高度的囱挑。
思考：把網(wǎng)速調(diào)慢會(huì)出現(xiàn)如下現(xiàn)象醉顽。
圖片折疊現(xiàn)象
增加一個(gè) load方法，等頁(yè)面的圖片全部加載完成在執(zhí)行下面的函數(shù) 看铆。
$(window).load(function(){}
$(window).load(function(){
<!-- 得到模板標(biāo)簽 -->
var templateString = $("#telt").html();
// 模板綁定解析
var complieFunction = _.template(templateString);
// Ajax請(qǐng)求數(shù)據(jù)
$.get("json/json1.txt",function(data){
//請(qǐng)求不是json結(jié)尾的文件徽鼎，類(lèi)型為string
console.log(typeof data);
//轉(zhuǎn)化為object對(duì)象
var data = eval("("+ data +")");
console.log(typeof data);
// 使用underscore遍歷眼拿到的數(shù)據(jù)
_.each(data.news,function(dictionary){
// 把拿到的json放到模板里
var domstring = complieFunction(dictionary);
// 把模板添加到事先準(zhǔn)備的地方里
$("#waterfall").append(domstring);
});
這里補(bǔ)充一個(gè)window.onload用法：主要內(nèi)容如下：
- window.onload=function(){}是等待所有的內(nèi)容都加載完之后執(zhí)行，比如圖片弹惦，內(nèi)容否淤，js，css等棠隐。
- $(function(){})石抡，是等待DOM加載完之后執(zhí)行（我的理解是標(biāo)簽繪制完畢之后），圖片未加載完時(shí)也能執(zhí)行助泽。
(document).ready(function(){})的簡(jiǎn)寫(xiě)方式啰扛，功能是一樣的嚎京。
- $(window).load(function (){})也是等待所有的內(nèi)容都加載完之后執(zhí)行。
- 不管是外鏈js還是頁(yè)面中的js的window.onload都只執(zhí)行最后的一個(gè)
- $(window).load(function (){})可以有多個(gè)隐解，而且都是順序執(zhí)行鞍帝。
思考：我在執(zhí)行過(guò)程中確實(shí)不會(huì)出現(xiàn)圖片折疊現(xiàn)象了，但是明顯等待刷新時(shí)間過(guò)長(zhǎng)煞茫，尤其是把網(wǎng)速調(diào)慢之后帕涌。怎么減少響應(yīng)時(shí)間？
答：競(jìng)速策略
_.each(data.news,function(dictionary){
//競(jìng)速規(guī)則续徽，誰(shuí)先加載完畢蚓曼，我先處理誰(shuí)
//這是系統(tǒng)內(nèi)置構(gòu)造函數(shù)
var img = new Image();//可以等于$(document).creatElement("Image");
// 讓瀏覽器讀到圖片
img.src = dictionary.imgurl;
//用一個(gè)數(shù)組存儲(chǔ)當(dāng)前三個(gè)列的總高度
var col_height = [0,0,0];
//我們現(xiàn)在給image轉(zhuǎn)為jQuery對(duì)象，然后綁定事件
$(img).load(function(){
//此時(shí)這張圖片加載完畢了钦扭，先處理這個(gè)人
// 把拿到的json放到模板里
var domstring = complieFunction(dictionary);
// 把模板添加到事先準(zhǔn)備的地方里
$("#waterfall").append($(domstring));
// 遍歷小格格
$(".grid").each(function(){
//得到數(shù)組中最小的那個(gè)數(shù)
var min_value = _.min(col_height);
//看一下最短列出現(xiàn)在index幾的位置上
var min_index = _.indexOf(col_height,min_value);
$(this).css({
"top" : min_value,
"left" : min_index*270
});
// 更新數(shù)字中最小的數(shù)纫版，接著進(jìn)行下次計(jì)算
col_height[min_index] += $(this).outerHeight()+20;
// 拿到最大的盒子高，來(lái)放進(jìn)去more盒子
$("#waterfall").css("height",_.max(col_height));
});
});
});
順序不一了
修改后完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)現(xiàn)瀑布流</title>
<style>
*{margin:0;padding:0;}
body {
background-color: #ccc;
}
.waterfall {
width: 790px;
margin: 0 auto;
position: relative;
}
.waterfall .grid img {
width: 230px;
border-radius: 10px;
}
.waterfall .grid {
padding: 10px;
width: 230px;
background-color: white;
position: absolute;
border-radius: 8px;
box-shadow: 1px 5px 10px 0 rgba(0,0,0,0.1);
}
.waterfall .grid p {
overflow: hidden;
padding: 0 10px;
}
.waterfall .grid .title {
line-height: 25px;
font-size: 14px;
float: left;
}
.waterfall .grid .author {
line-height: 25px;
font-size: 14px;
float: right;
}
.waterfall .grid .content {
line-height: 25px;
color: #93999f;
font-size: 12px;
}
.more {
margin: 0 auto;
width: 120px;
color: white;
background-color: lightblue;
text-align: center;
font: 14px/50px "SimSun";
display: none;
}
</style>
</head>
<body>
<!-- 引包 -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/underscore.js"></script>
<!-- HTML結(jié)構(gòu)的搭建 -->
<div class="waterfall" id="waterfall">
<!-- 此處放入模板template -->
</div>
<div class="more">正在加載...</div>
<!-- 模板使用underscore的template函數(shù)讀取json填入數(shù)據(jù) -->
<script type="text/template" id="telt">
<div id ="test" class="grid">
<img src="<%=imgurl%>" alt="">
<p>
<span class="title"><%=title%></span>
<span class="author"><%=author%></span>
</p>
<p class="content"><%=content%></p>
</div>
</script>
<script>
<!-- 得到模板標(biāo)簽 -->
var templateString = $("#telt").html();
// 模板綁定解析
var complieFunction = _.template(templateString);
var page = 1;
getreading(page);
// Ajax請(qǐng)求數(shù)據(jù)
function getreading(page){
$(".more").show();
$.get("json/json"+page+".txt",function(data){
//請(qǐng)求不是json結(jié)尾的文件客情，類(lèi)型為string
console.log(typeof data);
//轉(zhuǎn)化為object對(duì)象
var data = eval("("+ data +")");
// json請(qǐng)求全部完成其弊，沒(méi)有要請(qǐng)求的了。
if(data.news == ""){
$(".more").html("沒(méi)有更多了裹匙。瑞凑。末秃。");
return;
}
console.log(typeof data);
// 使用underscore遍歷眼拿到的數(shù)據(jù)
_.each(data.news,function(dictionary){
var img = new Image();
img.src = dictionary.imgurl;
//用一個(gè)數(shù)組存儲(chǔ)當(dāng)前三個(gè)列的總高度
var col_height = [0,0,0];
$(img).load(function(){
// 把拿到的json放到模板里
var domstring = complieFunction(dictionary);
// 把模板添加到事先準(zhǔn)備的地方里
$("#waterfall").append($(domstring));
// 遍歷小格格
$(".grid").each(function(){
//得到數(shù)組中最小的那個(gè)數(shù)
var min_value = _.min(col_height);
//看一下最短列出現(xiàn)在index幾的位置上
var min_index = _.indexOf(col_height,min_value);
$(this).css({
"top" : min_value,
"left" : min_index*270
});
// 更新數(shù)字中最小的數(shù)概页，接著進(jìn)行下次計(jì)算
col_height[min_index] += $(this).outerHeight()+20;
// 拿到最大的盒子高，來(lái)放進(jìn)去more盒子
$("#waterfall").css("height",_.max(col_height));
});
});
// 這個(gè)方法不好练慕，體驗(yàn)太差惰匙，看著不舒服。
//此步?jīng)]任何作用铃将，就是驗(yàn)證模板template里不能用id项鬼，只能用類(lèi)class。
//改變網(wǎng)格的背景劲阎，沒(méi)任何作用也不報(bào)錯(cuò)绘盟。
// $("test").css("background-color","red");
// $(".grid").each(function(){
// var sum = 0;
// for(var i = $(this).index()-3;i>=0;i-=3){
// sum += $(".grid").eq(i).outerHeight()+20;
// console.log(sum);
// }
// $(this).css({
// "top" : sum,
// "left" : ($(this).index() % 3) * 270
// });
// });
});
lock = true;
// 加載完成，標(biāo)簽可以消失
$(".more").hide();
});
}
var lock = true;
$(window).scroll(function(){
var rate = $(window).scrollTop()/($(document).height() - $(window).height());
if(!lock) return;
if(rate >=0.7){
page++;
lock = false;
getreading(page);
}
});
</script>
</body>
</html>
完整實(shí)例
