同位素库并不总是正常工作答案

【问题标题】：Isotope gallery not always working properly同位素库并不总是正常工作
【发布时间】：2015-06-04 14:06:56
【问题描述】：

我正在开发同位素库，有时它无法正常工作，我需要刷新几次页面，因为我对前端进行了一些更改，并且我发现每次刷新时作品集的工作方式都不同。

编辑：仅在 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>

【问题讨论】：

您需要发布您的同位素代码，而不仅仅是您的 html。我在您的网站上没有看到任何张贴在此处的图像。至少有一个链接怎么样。 jsfiddle 是最好的。

标签： html css fancybox gallery jquery-isotope

【解决方案1】：

没有代码，这有点猜测。您使用的是同位素 v1.56，而不是 v2，您需要使用Isoptope v1 imagesloaded info。

这就是你如何使用它：

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

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

对于同位素 v2，您需要单独加载 imagesloaded.js，因为它不包含在 v1.5 中

【讨论】：