JQuery Ajax + Json 实现瀑布流

function show() {
    $.ajax({
        type: "get",
        url: "goods",
        dataType: "json",
        success: function(data) {
            console.log(data);
            //var obj = JSON.parse(data);
            
            $.each(data, function(index,obj) {
                //console.log(obj.imgPath);
                
                //创建新的节点:div>img+p  
                var li = document.createElement('li');
                var div = document.createElement('div');
                var img = document.createElement('img');
                var p = document.createElement('p');
                
                img.src = obj.imgPath; //img获取图片地址
                p.innerHTML = obj.goodsTitle; //p获取图片标题  
                
                //添加
                div.appendChild(img);
                div.appendChild(p);
                li.appendChild(div);
                $("ul").append(li); 
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}
    
$(function(){
    $(window).scroll(function() {
        var top = $(window).scrollTop();
        var height = $(window).height();
        var domheight= $(document).height(); 
        
        // console.log("top:"+top+"height:"+height+"domheight:"+domheight);
        
        if( 20 + top + height >= domheight ){
            $('#showmore').text('加载中...');
            
            show();
        }
    });
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注