Изотопная галерея не всегда работает правильно

Question

Я работаю над изотопной галереей, а иногда ее не работает должным образом, мне нужно было обновить страницу несколько раз, потому что я внес некоторые изменения в интерфейс, и я увидел, что портфолио работает по-разному на каждом обновлении.

EDIT: только это делается на Chrome.

это, как он должен работать:

но иногда делает такие вещи, как это:

Вот the link на сайт, и вот мой изотоп галерея код :

У меня осталось несколько вещей, так как я узнал, что это не имеет значения сколько предметов я помещаю в галерею.

<!-- section works --> 
    <section id="section-works" class="section appear clearfix"> 
     <div class="container"> 
      <div class="row"> 
       <nav id="filter" class="col-md-12 text-center"> 
        <ul> 
         <li><a href="#" class="current btn-theme btn-small" data-filter="*">Alles</a></li> 
         <li><a href="#" class="btn-theme btn-small" data-filter=".photo" >Foto's</a> </li> 
         <li><a href="#" class="btn-theme btn-small" data-filter=".video">Video's</a> </li> 
        </ul> 
       </nav> 
       <div class="col-md-12"> 
        <div class="row"> 
         <div class="portfolio-items isotopeWrapper clearfix" id="3"> 

          <article class="col-md-4 isotopeItem photo"> 
           <div class="portfolio-item"> 
            <img src="img/portfolio/img1.jpg" alt="" /> 
            <div class="portfolio-desc align-center"> 
             <div class="folio-info"> 
              <h5><a href="#">Portfolio name</a></h5> 
              <a href="img/portfolio/img1.jpg" class="fancybox"><i class="fa fa-expand fa-2x"></i></a> 
             </div> 
            </div> 
           </div> 
          </article> 

          <article class="col-md-4 isotopeItem video"> 
           <div class="portfolio-item"> 
            <img src="img/portfolio/img6.jpg" alt="" /> 
            <div class="portfolio-desc align-center"> 
             <div class="folio-info"> 
              <h5><a href="#">Portfolio name</a></h5> 
              <a class="fancybox" href="js/jwPlayer5/player.swf? file=http://localhost/plusbus/img/portfolio/videos/files/vid1.mp4"  type="video/mp4" title="local video mp4"><i class="fa fa-expand fa-2x"></i></a> 
             </div> 
            </div> 
           </div> 
          </article> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

Answer 1

Без кода это немного догадка. Вы используете изотоп v1.56, а не v2, вам нужно использовать Isoptope v1 imagesloaded info.

Это, как вы его используете:

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
$container.isotope({ 
// options... 
}); 
}); 

Для изотопного v2, вам нужно будет загрузить imagesloaded.js отдельно, поскольку он не входит, как в v1.5