0

对于我的生活，我一直无法弄清楚为什么 div（包含图像）落后于现有的 div 而不是追加。

基本上，带有图像的附加 div 落后于现有 div 而不是附加。当我删除 Pickery 时，它可以正常工作，但需要 pickery 的功能才能获得正确的布局。

下面是我用来初始化 Packery 并在滚动时触发追加的内容。

$postswrapper = jQuery("#postswrapper");

$postswrapper.imagesLoaded(function(){
    $postswrapper.packery({
        "itemSelector": ".image_block", "gutter": 10
    });
});

var throttled = _.throttle(function(){
    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
    var scrolltrigger = 0.95;

    if ((wintop/(docheight-winheight)) > scrolltrigger && scroll_more) {
        scroll_more = false;

        $.ajax({
            url: current_web_root + "?action=ajax|load_thumbs&PageSpeed=off",
            success: function(html) {
                if(html) {

                    $postswrapper.append(html);

                    $postswrapper.imagesLoaded(function(){
                        $postswrapper.packery( 'appended', html );
                    });

                    scroll_more = true;
                }
            }
        });
    }
}, 100);
$(window).scroll(throttled);

的HTML...

<div id="postswrapper">
    <div class="image_block" id="image_block_id_68">
        <div class="image_holder">
                <a href="http://review.marijuanaselfies.com/p-1/i-68/briana-marie?orderby=&amp;q=" imageID="68" class="thumb_image"><img src="http://review.marijuanaselfies.com/contestant_image/68/home/briana-marie.jpg" class="center-block"></a>
        </div>
        <input type="button" class="btn btn-success btn-lg btn-vote center-block vote68" id="vote68" value="vote"  />
        <h4 class="text-votes center total_votes68">0 votes</h4>
    </div>
    <div class="image_block" id="image_block_id_69">
        <div class="image_holder">
                <a href="http://review.marijuanaselfies.com/p-1/i-69/briana-marie?orderby=&amp;q=" imageID="69" class="thumb_image"><img src="http://review.marijuanaselfies.com/contestant_image/69/home/briana-marie.jpg" class="center-block"></a>
                </div>
                <input type="button" class="btn btn-success btn-lg btn-vote center-block vote69" id="vote69" value="vote"  />
                <h4 class="text-votes center total_votes69">0 votes</h4>
        </div>
    </div>

该网站住在这里（请原谅内容，没有淫秽......）：http ://review.marijuanaselfies.com/

我已经添加了这个问题的 jsfiddle 处理。http://jsfiddle.net/36da6jha/5/

非常感谢！！！

4

1 回答 1

0

Packery 期望附加的项目是一个元素，而不仅仅是一个字符串。我用一行更新了你的小提琴，它似乎按照你想要的方式工作。

if (html) {

    html = $(html);
    $postswrapper.append(html);

...

小提琴

可能有比这更好的方法，但它应该可以满足您的需求。

于 2014-08-11T18:38:02.893 回答