服务器代理+jQuery.ajax实现图片瀑布流

服务器代理机制破解浏览器的同源策略
瀑布流功能实现分析
具体实现代码及业务实现分析

一、服务器代理机制破解浏览器同源策略

由于浏览器的同源策略无法请求不同域名下的资源，但是服务器的后台程序并不受同源策略的限制，所以就可以通过服务器的后台程序获取其他域名下的资源，然后再发送给浏览器，本质上还是在同源策略下实现的，毕竟服务器没有跨域这一说法，这种机制叫做服务器代理。（这篇博客不是为了解析服务器代理，所以不对服务器代理的实现做什么分析，只简单的描述浏览器在同源基础上获取其他域名下的资源）。

二、瀑布流功能实现分析

1.初始加载页面时获取一次服务器资源，将获取的资源根据每列的高度以最小原则添加图片。

2.当滚动条下滑时，出现空白区域时，即滚动条滚动的位置加上视窗的高度大于最小高度列的高度。触发加载资源，再添加图片。

需要的数据：

视窗高度：window.innerHeight（原生BOM属性）；$(window).height();（jQuery方法）。

滚动条的位置：

谷歌浏览器和未声明DTD <! DOCTYPE>获取滚动条的位置：document.body.scrollTop;

火狐和其他浏览器：document.bodyElement.scrollTop;

IE9+ 和最新浏览器都支持：window.pageXOffset; pageYOffset（scrollTop）；

兼容： var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0;

jQuery：$(window).scrollTop()；

三、具体实现代码及业务实现分析

web层：这里我使用了百度的资源，data数据能获取，但是由于百度图片有保护措施，最后获取的都是一张替代图片，但是不影响我们实现瀑布流功能。下面是实现服务器代理机制的PHP内容：（rn是一次请求数据的个数，可自己根据需求设置，其他数据大家自己去查吧，方正都没啥用，因为图片都是那张替代图片，但是连接是真实的）

图片API 通用接口

<?php

header('Content-type:text/html; charset="utf-8"');

$url = 'http://image.baidu.com/data/imgs?col=美女&tag=小清新&sort=10&pn=1&rn=20&p=channel&from=1';

$content = file_get_contents($url);

echo $content;

?>

通讯层：

 function getData(){

     if(!flag){

         flag = true;

         $.ajax({

             type:'GET',

             url:'http://localhost/jy_11_12_13/11_1/src/getPics.php?',

             success:addDom,

             beforeSend:function(){

                 $('.loading').show();//请求成功前显示loading

             },

             error:function(){

                 console.log('error');

             }

         });

     }

 }

根据数据-插入结构：

 function addDom(data){

     $('.loading').hide();//请求成功后隐藏loading

     // var oJSON = (new Function('return ' + data))();//标准JSON数据格式解释方法

     var oJSON = eval("(" + data + ")");//数据不是标准JSON格式，只能采用eval来解析

     var dataList = oJSON.imgs;

     dataList.pop();//清除最后一个空数据

     console.log(dataList);//在控制台打印数据，查看数据是否跟需求一致

     if(dataList.length > 0){

         //拿到数据后，遍历数据插入结构

         dataList.forEach(function(ele,index){

             var iDiv = $('<div class="item"></div>');

             var imgBox = $('<div class="image"></div>');

             var oImg = new Image();

             var oP = $('<p></p>');

             oP.text(ele.title);

             oImg.src = ele.imageUrl;

             //当图片获取到了以后插入页面

             oImg.onload = function(){

                 imgBox.append(oImg);

                 iDiv.append(imgBox).append(oP);

                 //获取最短的li的索引

                 var index = getMinList(oLi);

                 $(oLi[index]).append(iDiv);

             }

         });

     }

     num ++;//这个数据是用来记录页的，之前的一个数据可以实现分页请求，

     flag = false;//结构添加完成后将锁开启

 }

滚动操作：

 //获取最短li的索引函数

 function getMinList(dom){

     var minHeight = parseInt($(dom[0]).css('height'));

     var index = 0;

     for(var i = 1; i < oLi.length; i++){

         var height = parseInt($(dom[i]).css('height'));

         if(height < minHeight){

             minHeight = height;

             index = i;

         }

     }

     return index;

 }

 //往下滑动时

 //当滚动条的位置加上窗口高度大于最短的li，再次加载

 $(window).scroll(function() {

     var scrollHeight = $(window).scrollTop();//获取滚动条位置

     var clientHeight = $(window).height();//获取视窗高度

     var minLiH = parseInt($(oLi[getMinList(oLi)]).css('height'));//获取最短列的高度

     if(scrollHeight + clientHeight > minLiH){//当出现空白区域时调用网络请求加载数据

         getData();

     }

 });

最后全部代码（折叠）；

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>jQuery瀑布流（服务器代理）</title>

     <link rel="stylesheet" href="./css/index.css">

 </head>

 <body>

     <div class="wrapper">

         <ul>

             <li>

                 <div class="item">

                     <div class="image">

                         <img src="./image/0.png" alt="">

                         <p>我是title</p>

                     </div>

                 </div>

             </li>

             <li>

                 <div class="item">

                     <div class="image">

                         <img src="./image/1.png" alt="">

                         <p>我是title</p>

                     </div>

                 </div>

             </li>

             <li>

                 <div class="item">

                     <div class="image">

                         <img src="./image/2.png" alt="">

                         <p>我是title</p>

                     </div>

                 </div>

             </li>

             <li>

                 <div class="item">

                     <div class="image">

                         <img src="./image/3.png" alt="">

                         <p>我是title</p>

                     </div>

                 </div>

             </li>

         </ul>

         <div class="loading">Loading...</div>

     </div>

     <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>

     <script type="text/javascript" src="./js/index.js"></script>

 </body>

 </html>

HTML

 *{

     margin:;

     padding:;

     list-style: none;

 }

 .wrapper{

     /* 最小宽度 */

     min-width: 930px;

     margin: 0 auto;

     text-align: center;

 }

 .wrapper ul{

     display: inline-block;

 }

 .wrapper ul::after{

     content: "";

     clear: both;

     display: block;

 }

 .wrapper li{

     float: left;

 }

 .wrapper li .item{

     width: 200px;

     margin: 0 5px 10px;

     padding: 10px;

     border: 1px solid #ccc;

 }

 .wrapper li .item .image{

     width: 200px;

 }

 .wrapper li .item .image img{

     width: 200px;

 }

 .wrapper .loading{

     font-size: 30px;

     font-weight: bolder;

     color: #ccc;

 }

CSS

 var num = 1;

 var flag = false;//加锁

 var oLi = $('li');

 getData();

 function getData(){

     if(!flag){

         flag = true;

         $.ajax({

             type:'GET',

             url:'http://localhost/jy_11_12_13/11_1/src/getPics.php?',

             success:addDom,

             beforeSend:function(){

                 $('.loading').show();//请求成功前显示loading

             },

             error:function(){

                 console.log('error');

             }

         });

     }

 }

 function addDom(data){

     $('.loading').hide();//请求成功后隐藏loading

     // var oJSON = (new Function('return ' + data))();//标准JSON数据格式解释方法

     var oJSON = eval("(" + data + ")");//数据不是标准JSON格式，只能采用eval来解析

     var dataList = oJSON.imgs;

     dataList.pop();//清除最后一个空数据

     console.log(dataList);//在控制台打印数据，查看数据是否跟需求一致

     if(dataList.length > 0){

         //拿到数据后，遍历数据插入结构

         dataList.forEach(function(ele,index){

             var iDiv = $('<div class="item"></div>');

             var imgBox = $('<div class="image"></div>');

             var oImg = new Image();

             var oP = $('<p></p>');

             oP.text(ele.title);

             oImg.src = ele.imageUrl;

             //当图片获取到了以后插入页面

             oImg.onload = function(){

                 imgBox.append(oImg);

                 iDiv.append(imgBox).append(oP);

                 //获取最短的li的索引

                 var index = getMinList(oLi);

                 $(oLi[index]).append(iDiv);

             }

         });

     }

     num ++;//这个数据是用来记录页的，之前的一个数据可以实现分页请求，

     flag = false;//结构添加完成后将锁开启

 }

 //获取最短li的索引函数

 function getMinList(dom){

     var minHeight = parseInt($(dom[0]).css('height'));

     var index = 0;

     for(var i = 1; i < oLi.length; i++){

         var height = parseInt($(dom[i]).css('height'));

         if(height < minHeight){

             minHeight = height;

             index = i;

         }

     }

     return index;

 }

 //往下滑动时

 //当滚动条的位置加上窗口高度大于最短的li，再次加载

 $(window).scroll(function() {

     var scrollHeight = $(window).scrollTop();//获取滚动条位置

     var clientHeight = $(window).height();//获取视窗高度

     var minLiH = parseInt($(oLi[getMinList(oLi)]).css('height'));//获取最短列的高度

     if(scrollHeight + clientHeight > minLiH){//当出现空白区域时调用网络请求加载数据

         getData();

     }

 });