jQuery 瀑布流 ajax动态加载 图片格式出错? 400 报错-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jQuery 瀑布流 ajax动态加载 图片格式出错? 400 报错

爱吃鱼的程序员 2020-06-05 12:36:05 59

jQuery 瀑布流 ajax动态加载 图片格式出错? 400 报错

jQuery 瀑布流  使用ajax加载数据库图片url   ajax每次请求到的数据不变时 瀑布流效果没问题。 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题,

waterfall.js代码

$(document).ready(function(){
	loadMore();
});

$(window).scroll(function(){
	if($(document).height() - $(this).scrollTop() - $(this).height()<10)
		// alert("123");
	loadMore();	
});
var dataCount = 1;
function loadMore(){
	$.ajax({
		url : 'data1.php',
		dataType : 'json',
		data : {"pageNow":dataCount},
		success : function(json)
		{
			if(typeof json == 'object')
			{
				var oProduct, $row, iHeight, iTempHeight;
				for(var i=0, l=json.length; i<l; i++)
				{
					oProduct = json[i];
					
					// 找出当前高度最小的列, 新内容添加到该列
					iHeight = -1;
					$('#stage li').each(function(){
						iTempHeight = Number( $(this).height() );
						if(iHeight==-1 || iHeight>iTempHeight)
						{
							iHeight = iTempHeight;
							$row = $(this);
						}
					});
					
					$item = $('<img src="'+oProduct.image+'"><p>'+oProduct.title+'</p>').hide();
					
					$row.append($item);
					$item.fadeIn(1000);
					
				}
			}
			dataCount++;
		}
	});
}



html代码:
<body>
	<ul id="stage">
		<li></li>
		<li></li>
	</ul>
		
			<!-- <div class="row">
				<img src="img/1.jpg" >
				<img src="img/2.jpg" >
				<img src="img/3.jpg">
			</div>
 -->
</body>

css:

*{
		margin: 0;
		padding: 0;
	}
	body{
		
		width: 100%;
		height: auto;
	}
	#stage{
		width: 100%;
		margin:0 ;
		padding:0;
		
	}
	#stage li{
		list-style: none;
		float: left;
		width: 50%;
		padding:1%;
		/*background-color: silver;*/
	}
	#stage li img{
		border: 1% solid #cccccc;
		box-shadow: 0 0 5px #ccc;
		border-radius: 6px;
		width: 96%;
		margin: 1%;
	}
	#stage li p{
		text-align: center;
	}

php代码:

<?php
require_once "sqlHelper.php";
require_once "Paging.class.php";

$paging=new Paging();
$paging->pageNow=1;
if(!empty($_GET['pageNow'][0])){
	$paging->pageNow=$_GET['pageNow'][0];
}
$paging->pageSize=8;
$db = new SqlHelper();

$sql = "select url,nickname from imgurl where 1=1 ";
$sql2="select count(1) from imgurl where 1=1";

	$sql .=" limit ".($paging->pageNow-1)*$paging->pageSize.",".$paging->pageSize;
	$db->execute_dql_paging($sql,$sql2,$paging);
	$db->close_connect();

$data = array();
foreach ($paging->res_array as $key => $value) {
	$data[] = (object)array('image'=>$value['url'],'title'=>$value['nickname']);
}

$json = array();

for($i=0;$i<count($data);$i++)
{	
	$json[] = $data[$i];
}

echo json_encode( $json );

?>







SQL JSON 前端开发 JavaScript PHP 数据库 数据格式
分享到
取消 提交回答
全部回答(1)
  • 爱吃鱼的程序员
    2020-06-05 12:36:20

    console.log一下每次的iHeight看看.

    由于图片加载是有网络延时的, 所以当添加第一个图片后, 图片还没来得及加载, 就进入第二个图片的循环了, 此时的高度计算很可能是没有算上图片的真实高度的, 即只算上了title的p元素高度, 所以每次数据一样时, title一样, 输出也看起来正常, 而每次数据不一样的话, 就有可能因为title的高度不一样而导致排版在图片加载后走样了.

    一个快速的验证方法是, 不加图片只加title, 看看数据不一样的情况下排版是否如预期.

    ######

    因为图片加载慢,未加载的时候高度为0,你就把瀑布流每块的位置定死了,等到图片都加载完成后自然会重叠。两种解决办法:1.提前预留好图片高度。2.当图片都加载完成后再重新计算下每块的位置。

    如果你想做响应式网站的话,第一种方法显然不好办,因为你不知道要留多少高度,所以还是看下第二种方法吧。我喽了一眼WaterFall这插件,发现有个“checkImagesLoaded”方法,你可以试试我没用过,我用的是UIKit的“动态网格”做瀑布流——http://www.qudaodao.com

    ######

    引用来自“闪电阿鸵”的评论

    因为图片加载慢,未加载的时候高度为0,你就把瀑布流每块的位置定死了,等到图片都加载完成后自然会重叠。两种解决办法:1.提前预留好图片高度。2.当图片都加载完成后再重新计算下每块的位置。

    如果你想做响应式网站的话,第一种方法显然不好办,因为你不知道要留多少高度,所以还是看下第二种方法吧。我喽了一眼WaterFall这插件,发现有个“checkImagesLoaded”方法,你可以试试我没用过,我用的是UIKit的“动态网格”做瀑布流——http://www.qudaodao.com

    太感谢你了!!!  你提到的imagesLoaded 这插件  我在github上搞了一个  然后没问题了!哈哈   谢谢
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程