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

【问题标题】：Using Packery with multiple containers?将 Packery 与多个容器一起使用？
【发布时间】：2014-05-16 05:53:19
【问题描述】：

您好，我正在尝试使用 packery 库来放置包含各种项目的外观书。每个项目都有一组图像，这些图像正在使用打包机来打包它们。

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

});

【问题讨论】：

标签： packery

【解决方案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>';
}

【讨论】：

你这个男人！我认为使用 class vs id 可以解决这个问题，但我认为 packery 还不是为此而设计的。