jQuery 瀑布流 ajax动态加载 图片格式出错? 400 报错
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++;
}
});
}
<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 );
?>
写回答
-
https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIBconsole.log一下每次的iHeight看看.
由于图片加载是有网络延时的, 所以当添加第一个图片后, 图片还没来得及加载, 就进入第二个图片的循环了, 此时的高度计算很可能是没有算上图片的真实高度的, 即只算上了title的p元素高度, 所以每次数据一样时, title一样, 输出也看起来正常, 而每次数据不一样的话, 就有可能因为title的高度不一样而导致排版在图片加载后走样了.
一个快速的验证方法是, 不加图片只加title, 看看数据不一样的情况下排版是否如预期.
######因为图片加载慢，未加载的时候高度为0，你就把瀑布流每块的位置定死了，等到图片都加载完成后自然会重叠。两种解决办法：1.提前预留好图片高度。2.当图片都加载完成后再重新计算下每块的位置。
如果你想做响应式网站的话，第一种方法显然不好办，因为你不知道要留多少高度，所以还是看下第二种方法吧。我喽了一眼WaterFall这插件，发现有个“checkImagesLoaded”方法，你可以试试我没用过，我用的是UIKit的“动态网格”做瀑布流——http://www.qudaodao.com
######太感谢你了！！！ 你提到的imagesLoaded 这插件 我在github上搞了一个 然后没问题了！哈哈 谢谢引用来自“闪电阿鸵”的评论
因为图片加载慢，未加载的时候高度为0，你就把瀑布流每块的位置定死了，等到图片都加载完成后自然会重叠。两种解决办法：1.提前预留好图片高度。2.当图片都加载完成后再重新计算下每块的位置。
如果你想做响应式网站的话，第一种方法显然不好办，因为你不知道要留多少高度，所以还是看下第二种方法吧。我喽了一眼WaterFall这插件，发现有个“checkImagesLoaded”方法，你可以试试我没用过，我用的是UIKit的“动态网格”做瀑布流——http://www.qudaodao.com
2020-06-05 12:36:20赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
