Question

我已经搜索过，我已经尝试但我无法找到答案。我在同位素过滤中得到了很多图像，我已经将图像加载了，但图像在垂直方向上仍然相互重叠。
这是链接http://cpmedia.pl/test/portfolio.html

代码：

$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : '.itemwrap',
        layoutMode: 'horizontal',
        horizontal: {
            verticalAlignment: 0.5
        }
    });
});

}）;

并且什么都没有......

Answer 1

首先，你正在加载jquery两次，一次是自己再加上yepnope。其次，您同时使用同位素两次，一次使用#container上的图像（我在您的页面上看不到）并再次打开。 portfolioContainer，确实存在，但不使用imagesLoaded调用。您需要加载一次jQuery，并调用一次同位素并尝试以下代码：

 $(function(){
 var $container = $('.portfolioContainer');
 $container.imagesLoaded( function(){
$container.isotope({
    itemSelector : '.itemwrap',
    layoutMode: 'horizontal',
    horizontal: {
        verticalAlignment: 0.5
    }
});
});
});

如果你想使用水平，那么得到它here并加载它

<强>附录：

查看源代码，您仍在加载js文件的多个副本。这就是我在你的来源中看到的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="assets/core/libs/js/loader.js"></script>
<script src="assets/core/libs/js/vendor/jquery.livetwitter.min.js"></script>
<script src="assets/core/libs/js/vendor/jquery.selestnav.min.js"></script><script src="assets/core/libs/js/plugins.js"></script>
<script src="assets/core/libs/js/main.js"></script>
<script src="assets/user/user.js"></script><script src="skinme/skinme.js"></script>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>  <script src="./assets/core/libs/js/jquery.min.js"></script>
<script src="./assets/core/libs/js/loader.js"></script>
<script src="./assets/html5lightbox.js"></script>
<script src="./assets/core/libs/js/jquery.isotope.min.js"></script>
<script src="./assets/core/libs/js/jquery.livetwitter.min.js"></script>
<script src="./assets/core/libs/js/jquery.jribbble.min.js"></script>
<script src="./assets/core/libs/js/jquery.selestnav.min.js"></script>
<script src="./assets/core/libs/js/plugins.js"></script>
<script src="./assets/core/libs/js/main.js"></script>
<script src="./assets/core/libs/js/user.js"></script>
<script src="./assets/core/libs/js/skinme.js"></script>
<script src="./assets/core/imagesloaded.pkgd.js"></script>

同位素（再次！）重叠图像垂直

1 个答案: