将Packery与多个容器一起使用？

debugcn 发表于 Dev

尾数

嗨，我正在尝试使用包装库来放置包含各种物品的外观书。每个项目都有一组图像，这些图像正在使用包装厂进行包装。

我为每个容器都创建了容器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
});

}）;

尼达尔

您需要使每个包装容器具有不同的类名。然后为每个包装容器创建一个新的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>';
}