jQuery masonry 瀑布流外掛 動態載入資料的問題
阿新 • • 發佈:2019-01-26
剛開始接觸masonry外掛,用ajax請求資料 ,請求過來渲染頁面 會有空白 ,不能動態新增資料,百度一大堆 ,最後找到方法:
function getData(ju){ $.post('php/getNew.php',{tit:ju}, function (ni) { var res = typeof ni == 'object' ? ni : eval('('+ni+')'); var nm = res.data.length; if(nm == 0 ){ return false; } for(var i = 0;i < nm;i++){ var $elem = $('<div class="ju_box">'+ '<div class="ju_left">'+ '<div class="ju_img"><img class="lazy" src="'+res.data[i].img_url+'" alt="'+res.data[i].id+'" /></div>'+ '<span class="ju_lei">'+res.data[i].lei+'</span>'+ '</div>'+ '<div class="ju_right">'+ '<h2>'+res.data[i].title+'</h2>'+ '<p class="ju_main">'+res.data[i].main+'</p>'+ '<p class="ju_fen">'+ '<span class="ju_time">'+res.data[i].time+'</span>'+ '</p>'+ '</div>'+ '</div>'); //這裡是外掛呼叫方法,先把資料append進容器,在通過appended方法 $container.append($elem).masonry('appended', $elem,true); // $container.imagesLoaded(function () { $container.masonry({ columnWidth:30, gutterWidth: 10, //列的間隙 isAnimated: true, isResizableL:true, stagger: 30 }); // }); } }) }