jQuery masonry 瀑布流插件动态加载数据的问题

最新推荐文章于 2021-06-17 12:36:52 发布

原创

最新推荐文章于 2021-06-17 12:36:52 发布 · 置顶 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery masonry #ajax #数据 #masonry #空白问题

在使用jQuery Masonry插件实现瀑布流布局时，通过AJAX获取数据并渲染到页面时遇到空白问题。经过搜索和尝试，找到了解决动态加载数据不显示或出现空白的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始接触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>