무한가재-jsonp-폭포류 예

    
    
    


    

        

            

                
                    
                    
                    
                    
                
                

            
            
           
        

    
    
    
        // 1、  。load          
        //2、      ajax          


        function isVisible($node) {

           var scrollH=$(window).scrollTop(),
                   winH=$(window).height(),
                   nodeOffset=$node.offset().top;

            if ((scrollH+winH)>=nodeOffset){
                return true
            }
            else {return false}
        }

        var perPageCount=9,
                curPage=1;
        function getAndPlaceData() {
            if (isVisible($(".load"))){
                $.ajax({
                    url:"http://platform.sina.com.cn/slide/album_tech",
                    dataType: 'jsonp',
                    jsonp:"jsoncallback",
                    data:{
                        app_key:"1271687855",
                        num: perPageCount,
                        page:curPage
                    }
                }).done(function (ret) {
                    if (ret && ret.status && ret.status.code === "0"){
                        placeData(ret.data);
                    }else{console.log("get ajax data error1")}
                    
                })
                 .fail(function () {
                            console.log("get ajax data error2")
                 })
            }
        }

        //3、      append ul         ，            

        function placeData(nodelist) {
            var $nodes=renderData(nodelist);
            var arr=[];
            $nodes.find("img").each(function () {
                var defer = $.Deferred();
                $(this).load(function () {
                    defer.resolve()
                });
                arr.push(defer)
            });

            $.when.apply(null,arr).done(function () {
                console.log("all pic loaded");
                waterFall($nodes)
            })

        }

        function renderData(data) {
            var str="",
                $nodes;
            for (var i=0;i<data.length;i++){
                str+='<li class="content">';
                str+='<a href="'+data[i].url+'">[       ……(2)]</a>';
                str+='<h4>'+data[i].short_name+'</h4>';
                str+='<p>'+data[i].short_intro+'</p>';
                str+='</li>';
            }
            $nodes=$(str);
            $(".ct").append($nodes);
            return $nodes;
        }

        var widthNum=parseInt($("#wrap").width()/$(".content").outerWidth(true)),
                allHeight=[];

        for (var i=0;i<widthNum;i++){
            allHeight.push(0)
        }


        function waterFall($nodes) {

            $($nodes).each(function () {
                var $cur=$(this),
                        indx=0,
                        minAllHeight=allHeight[0];
                for (var j=0;j<allHeight.length;j++){
                    if (allHeight[j]<minAllHeight){
                        minAllHeight=allHeight[j];
                        indx=j;
                    }
                }

                $cur.css({
                    "left":indx*$cur.outerWidth(true),
                    "top":minAllHeight
                });
                allHeight[indx]=minAllHeight+$cur.outerHeight(true);
                $(".ct").height(Math.max.apply(null,allHeight));
            })

        }

        getAndPlaceData();

        $(window).on("scroll",function () {
            getAndPlaceData();

        })