10-ajax瀑布流练习题 代理服务器 跨域

图片.png

这里图片资源用的是
http://www.wookmark.com/api/json/popular?page=
通过用自家的服务器(代理服务器)的方式进行了跨域.
用的是wampserver, 搭建的服务器.

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrapper{
    width: 80%;
    min-width: 930px;
    margin: 0 auto;
    text-align: center;
}

.wrapper ul{
    display: inline-block;
}

.wrapper li{
    /*vertical-align: top;*/
    /*display: inline-block;*/
    float: left;
}

.wrapper li .item{
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 0px 5px 10px;
}

.wrapper li .item .image{
    width: 100%;
}

.wrapper li .item img{
    width: 100%;
}


.load {
    font: 30px  "微软雅黑";
    font-weight: bolder;
    color: #CCCCCC;
    text-align: center;
    display: none;
}

js

(function ($) {
    //第一步发送ajax请求,获取图片数据
    var oLi = document.getElementsByTagName('li'),
        flag = false,
        num = 1;
        
    getData();
    function getData() {
        if(!flag){
            flag = true;
            $.ajax({
                type:"GET",
                url:"http://localhost/water/js/getPic.php?cpage" + num,
                async:true,
                beforeSend:function () {
                    $('.load').show();
                },
                success:addDom,
                error: function () {
                    console.log('error');
                }
            
        });
        };
    
        num++;
        
        }
        function addDom (data) {
            var dataList = JSON.parse(data);
            console.log(dataList);
                $('.load').hide();
        if(dataList.length > 0){
            dataList.forEach(function (ele,index) {
                var iDiv = $("
");
                var imgBox = $("
");
                var oImg = new Image();
                var oP = $('
');
                oP.text(ele.title);
                oImg.src = ele.preview;
                oImg.onload = function () {
                    imgBox.append(oImg);
                    iDiv.append(imgBox).append(oP);
                    var index = getMinList(oLi);//判断哪个li是最短的
                    $(oLi[index]).append(iDiv);
                }
            })
        }
        flag = false;
    }
    
        function getMinList (dom) {
            var minHeight = parseInt($(dom[0]).css('height'));
            var index = 0;
            for (var i = 1; i < dom.length; i++){
                var height = parseInt($(dom[i]).css('height'));
                if(height < minHeight){
                    minHeight = height;
                    index = i;
                }
            }
//          console.log(index);
            return index;
        }
        
//      $(window).scrollTop() + $(window).height() > (oLi[getMinList(dom)]).css('height')
$(window).scroll(function () {
    var clientHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var minLiH = parseInt($(oLi[getMinList(oLi)]).css('height'));
    if(scrollHeight + scrollHeight > minLiH){
        getData();
    }
//  console.log(clientHeight,scrollHeight,minLiH);
})
})(jQuery)

html

  
  
    
    
    
         
  
  
    

        

            

                

                    

                        
                        
描述1
                    
                
            
            

                

                    

                        
                        
描述2
                    
                
            
            

                

                    

                        
                        
描述3
                    
                
            
            

                

                    

                        
                        
描述4
                    
                
            
        
    
    
loading...
    
    
    
  
  
  

php