1. 程式人生 > >jQuery masonry 瀑布流外掛 動態載入資料的問題

jQuery masonry 瀑布流外掛 動態載入資料的問題

剛開始接觸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
					});
                // });
			}
		})
	}