对多个容器使用Packery

Question

嗨，我正在尝试使用包库来放置包含各种项目的look book。每个项目都有一个图像数组，这些图像使用包装来包装它们。

我已经为每个创建了容器div，但包装似乎只在第一个上工作。有人能帮我吗?

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类的新实例。我已经把你的代码重构了一点，所以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>';
}

?>