Question

我尝试使用isotope以masonry风格显示图片。

我在标题中包含以下内容：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script>
            var $container = $('.album-lister');
            $container.isotope({
                itemSelector: '.thumb',
                masonry: {
                    columnWidth: 100
                }
            })
        </script>

我的HTML看起来像这样：

<ul class="album-lister">
    <li class="thumb"><img src="http://localhost/57898d673ae1f7482d04ab1c3de60363.jpg"></li>
    <li class="thumb"><img src="http://localhost/behind_scenes_1.jpg"></li>
    <li class="thumb"><img src="http://localhost/behind_scenes_2.jpg"></li>
    <li class="thumb"><img src="http://localhostbehind_scenes_3.jpg"></li>
</ul>

我添加了以下CSS：

.album-lister .thumb img{ max-width: 100%;height:auto;}
.album-lister .thumb{width:20%;}

我错过了什么？没有任何内容可以调整为100px，没有区别。

编辑：我尝试过按照建议使用imagesLoaded：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

var $ container = $（＆＃39; .album-lister＆＃39;）。imagesLoaded（function（）{ $ container.isotope（{ itemSelector：＆＃39; .thumb＆＃39;， layoutMode：＆＃39; fitRows＆＃39;，石工： { columnWidth：100 } }）; }）;

Answer 1

试试这个：

<script type="text/javascript">

 jQuery(document).ready(function () {
            var $container = $('.album-lister');
            $container.isotope({
                itemSelector: '.thumb',
                masonry: {
                    columnWidth: 100
                }
            })

  });

Answer 2

在加载图像之前，你正在将JS解雇。处理此问题的最佳方法是使用imagesLoaded，它将等待在Isotope运行之前加载图像。这比等待$(document).ready()更好，因为Isotope需要知道图像大小才能正确处理布局，并且只有在加载后才能获取它们。

在这里阅读更多内容;

http://isotope.metafizzy.co/appendix.html

您的代码将是;

jQuery(document).ready(function () {
  var $container = $('#album-lister');

  $container.imagesLoaded( function(){
      $container.isotope({
          itemSelector: '.thumb',
          layoutMode: 'fitRows',
          masonry: {
              columnWidth: 100
          }
      });
  });
});

我看到你现在必须单独加载imagesLoaded插件，它实际上是由编写Isotope的Dessandro接管的;

https://github.com/desandro/imagesloaded

这是另一个SO线程的更多调试。

Isotope display gallery after images loaded

最后几点 - 我会使用容器的ID而不是类，我不会将每个项目作为无序列表;

<div id="album-lister">
    <div class="thumb"><img src="http://localhost/57898d673ae1f7482d04ab1c3de60363.jpg"></div>
    <div class="thumb"><img src="http://localhost/behind_scenes_1.jpg"></div>
    <div class="thumb"><img src="http://localhost/behind_scenes_2.jpg"></div>
    <div class="thumb"><img src="http://localhostbehind_scenes_3.jpg"></div>
</div>

从语义上讲，它不是一个列表，你只需通过标记就可以让你的CSS生活更加艰难。

Masonry UL LI lister，图像不适合

2 个答案: