Jquery Append Overlaying, когато се използва с Packery

За живота си не успях да разбера защо divs (със съдържащи се изображения) изостават от съществуващите 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);

...

Fiddle

Може да има по-добър начин да го направите от този, но той трябва да ви осигури това, от което се нуждаете.

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