如何解决我附加的项目越多,同位素布局变得越来越奇怪
我在我的网站上有这个页面,在那里我以类似马赛克的结构显示一些帖子,底部有一个“加载更多”按钮,问题是,我按下那个按钮越多,布局就越奇怪,所有列应该水平对齐,这适用于初始帖子,但不适用于新帖子
这是“加载更多”按钮触发的功能的一部分:
Isotope.prototype._positionItem = function( item,x,y ) {
item.goTo( x,y );
};
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',percentPosition: true,layoutMode: 'masonry',masonry: {
columnWidth: '.grid-sizer',horizontalOrder: true
}
});
if (data.success === true) {
mosaic.page++;
$('html,body').animate({
scrollTop: $('.grid').offset().top + $('.grid').height()
},'slow');
var fade = 0;
$.each(data.data,function(key,post){
var template = $('#post-item').html();
Mustache.parse(template);
var item = Mustache.render(template,post);
$grid.append( item );
$('.grid-new:hidden:last-child()').fadeIn(fade += 300);
});
setTimeout(function(){
$grid.isotope('reloadItems').isotope();
},500);
if (data.data.length < 9)
$('.load_more').hide();
} else {
if (data.data[0]['no-more-posts'])
$('.load_more').hide();
else
console.error(data.data);
}
The layout should look like this,and in the start,it works perfectly
After pressing it a little,the page starts to look like this
编辑:看了一点之后,我注意到即使在我按下“加载更多”之前就已经有问题了,如果你看这张图片here,在一个元素的两倍之后顺序就搞砸了其他人的高度(灰色的),在它之后,“第一个”变成右边的,“最后一个”在左边,我相信这可能是我的问题的原因,这里是生成初始页面/网格的 wordpress 主题代码:
<section class="grid">
<div class="grid-sizer"></div>
//...
<?PHP if ($posts->have_posts()) : while ($posts->have_posts()) : $posts->the_post(); ?>
//...
<article class="grid-item" >
//my post structure here
</article>
<?PHP endwhile; ?>
</section>
//...
<?PHP if (!wp_is_mobile()): ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
Isotope.prototype._positionItem = function( item,y ) {
item.goTo( x,y );
};
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',masonry: {
columnWidth: '.grid-sizer',horizontalOrder: true
}
});
});
</script>
<?PHP endif; ?>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。