Jquery Append Overlaying при использовании с Packery

На всю жизнь я не смог понять, почему элементы 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/

Большое спасибо!!!


html jquery css twitter-bootstrap-3 packery
person Lucky Edward    schedule 11.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Packery ожидает, что добавленный элемент будет элементом, а не просто строкой. Я обновил вашу Fiddle одной строкой, и, похоже, она работает так, как вы этого хотите.

if (html) {

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

...

Скрипка

Возможно, есть лучший способ сделать это, но он должен дать вам то, что вам нужно.

person jkrehm    schedule 11.08.2014
comment
Работает вполне хорошо! Я пробовал jQuery.parseHTML(), но ваше решение просто работает! - person Lucky Edward; 12.08.2014