砌体问题专栏

Question

我想通过添加一种新型画廊来重新设计我的网站（简而言之，它是关于砌体的）。

在我看来，我想要一个完整的页面宽度，其中包含几列图像。接下来的问题是，使用此代码，我只有 2 列；事实上，在这些列中，我只有图像。

The code:

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

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.item'
  });
});

我想要全宽的图像，4-5 列取决于图像的宽度。

Answer 1

您的代码存在一些问题。您在 2 个地方设置砌体参数，使用 html 中的数据属性和 javascript。您正在使用 jQuery js，但您的 jsfiddle 中没有包含 jQuery。您正在调用 imagesloaded.js 但您也没有将它包含在您的小提琴中。您将 columnWidth 设置为 200，但您的项目使用百分比。 这是使用 jQuery、imagesloaded 和 grid-sizer 更新的 jsfiddle，您的图像响应速度更快。

代码：

 var $container = $('#container');
$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.item',
     columnWidth: '.grid-sizer'
  });
 });

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }
.grid-sizer { width: 25%; }
.item img{width:100%;}

查看 HTML 以了解如何使用 grid-sizer。 我也删除了您的数据属性设置

----ADDENDUM-----回应你的cmets

您试图在加载 js 文件之前调用 imagesloaded 和 masonry，因此您会收到“未定义”错误。

这个：

  <script>
            var $container = $('#container');
                $container.imagesLoaded( function(){
                  $container.masonry({
                    itemSelector : '.item',
                     columnWidth: '.grid-sizer'
                  });
                 });

            </script>

之后需要加载：

<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>

不是在他们之前，就像现在一样。