Question

我正在使用zenphoto，bootstrap和masonry制作照片库模板。砌体在第一次加载时运行良好，但在页面调整大小时不会重新加载。我想我必须使用砌体bindResize（）方法但是我应该如何在引导程序中使用它？

有生成的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”而且它是用于砌体v3。如果要继续使用较旧的Masonry版本，则需要将其更改为“isResizable”。见下文。否则升级到v3（你还需要单独加载imagesloaded.js，因为它不再是v3中砌体的一部分）

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

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

如何使用带引导程序的砌体bindResize？

1 个答案: