Как использовать кладовое связываниеResize с загрузкой?

Question

Я работаю над шаблоном фотогалереи, используя zenphoto, bootstrap и kason. Масонство хорошо работает при первой загрузке, но не перезагружается при изменении размера страницы. Я полагаю, что мне нужно использовать метод кластеризации bindResize(), но как его использовать с помощью бутстрапа?

есть genrated 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

Во-первых, вы получаете ошибки, потому что вы используете «isResizeBound» в Кладка v2 и для кладки v3. Если вы хотите продолжить использование старой версии масонства, вам нужно изменить ее на «isResizable». См. Ниже. В противном случае обновление до версии 3 (вам также необходимо загрузить imagesloaded.js отдельно, так как он уже не является частью кладки в v3)

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

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