砌体 UL LI 列表，图像不适合

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 = $('.album-lister').imagesLoaded( function() { $container.isotope({ itemSelector: '.thumb', layoutMode: 'fitRows', 石工： { 列宽：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 生活更加艰难。