使用多个容器的Packery？

Question

嗨，我正试着用包装库来放置一本包含各种物品的样书。每个项目都有一组图像，它们使用包装来包装它们。

我已经为每个包创建了容器div，但是packery似乎只在处理第一个容器。有谁可以帮我？

这是HTML

<?php
    $args = array(
    'posts_per_page'   => 100);

        $posts = get_posts($args);

        if($posts)
        {
            foreach($posts as $post)
                {
                    echo '<div class="range">'; // div for each range
    ?>
                    <h1><?php the_field('range_title'); ?></h1>
                        <?php
                        $images = get_field('range_gallery');
                        if( $images ):
                        ?>
                            <div id="slider">
                                <?php foreach( $images as $image ): ?>
                                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                                    <p><?php echo $image['caption']; ?></p>
                                <?php endforeach; ?>
                            </div>
                            <div id="carousel" class="packery">
                                <?php foreach( $images as $image ): ?>
                                    <div class="item" >
                                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif;?>
                    <?php echo '</div>';
                }
         }

    ?>

下面是非常基本的javascript：

jQuery(document).ready(function () {

var container = document.querySelector('.packery');
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10
});

})；

Answer 1

您需要让每个容器都有不同的类名。然后为每个Packery容器创建packery类的一个新实例。我已经接受了您的代码，并对其进行了一些重构，这样html就会在循环的末尾回响。

<?php
$args = array('posts_per_page' => 100);
$posts = get_posts($args);
if($posts){
    $html = '';
    $script = '';
    foreach($posts as $key => $post){
        $html .= '<div class="range">'; // div for each range
        $html .= '<h1>'.get_field('range_title').'</h1>';
        $images = get_field('range_gallery');
            if( $images ){                
                $html .= '<div id="slider">';
                foreach( $images as $image ){
                    $html .= '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
                    $html .= '<p>'.$image['caption'].'</p>';
                }
                $html .= '</div>';
                $html .= '<div id="carousel" class="packery'.$key.'">';
                foreach( $images as $image ){
                    $html .= '<div class="item" >';
                    $html .= '<img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" />';
                    $html .= '</div>';
                }
                $html .= '</div>';
            }
        $html .= '</div>';
        $script .= "jQuery(document).ready(function () { 
                var container".$key." = document.querySelector('.packery".$key."');
                var pckry = new Packery( container".$key.", {
                    // options
                    itemSelector: '.item',
                    gutter: 10
                });
            });";
    }
    echo $html;
    echo '<script>'.$script.'</script>';
}

?>