如何在引导程序中使用砌体 bindResize？

Question

我正在使用 zenphoto、bootstrap 和 masonry 制作照片库模板。 砌体在第一次加载时效果很好，但在页面调整大小时不会重新加载。 我想我必须使用 masonry bindResize() 方法，但是我应该如何将它与 bootstrap 一起使用？

这里有生成的 html 代码，你可以在这里看到它的实际效果：http://test.vincentbourganel.fr/pages/portfolio

提前感谢您的帮助。

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="post clearfix">
                <p>Voici une sélection de photos de ma <a title="galerie" href="/page/gallery">galerie</a>.</p>

                <script type="text/javascript" src="/themes/zpBootstrap/js/jquery.masonry.min.js"></script>
                <div id="portfolio-wrap" style="margin: 0; padding: 0;">
                    <ul id="portfolio" class="list-inline"  style="margin: 0; padding: 0;">
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141.jpg" title="Le Grand Veymont">
                                <img src="/cache/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141_h150_thumb.jpg" alt="Le Grand Veymont" class="ombre" height="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/20101111-voyage-marseille/img_4458.jpg" title="Calanque d'En-Vau I">
                                <img src="/cache/20101111-voyage-marseille/img_4458_h150_thumb.jpg" alt="Calanque d&#039;En-Vau I" class="ombre" height="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/groupe-photo-ecully/portraits_urbains/_mg_3158.jpg" title="_mg_3158">
                                <img src="/cache/groupe-photo-ecully/portraits_urbains/_mg_3158_w150_thumb.jpg" alt="_mg_3158" class="ombre" width="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/20100723-voyage-irlande/img_3779.jpg" title="Mizen Head">
                                <img src="/cache/20100723-voyage-irlande/img_3779_h150_thumb.jpg" alt="Mizen Head" class="ombre" height="150" />
                            </a>
                        </li>
                        [...there is a lot of other pictures...]
                    </ul>
                </div>

                <script type="text/javascript">
                $(function(){
                    var $container = $('#portfolio-wrap');

                    $container.imagesLoaded(function(){
                        $container.masonry({
                            itemSelector : '.portfolio-item',
                            columnWidth: 5
                        });
                    });
                });
                </script>
            </div>
        </div>
    </div>
</div> <!-- /.container -->

Answer 1

首先，您会遇到错误，因为您在 Masonry v2 中使用了“isResizeBound”，它适用于 masonry v3。如果您想继续使用旧的 Masonry 版本，您需要将其更改为“isResizable”。 见下文。 否则升级到 v3（您还需要单独加载 imagesloaded.js，因为它不再是 v3 砌体的一部分）

  $(function(){
     var $container = $('#portfolio-wrap');

     $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.portfolio-item',
            isResizable: false,
            columnWidth: 5
        });
      });
    });