砌体问题专栏

Question

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

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

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

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

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

Answer 1

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

代码：

 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%;}

有关如何使用 grid-sizer 的信息，请参阅 HTML。我也删除了您的数据属性设置

----附录-------- 回应您的意见

您试图在 js 文件加载之前调用 imagesloaded 和 masonry，因此您收到 "undefined" 错误。

这个：

  <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>

不像现在这样，在他们面前。

砌体问题专栏

Masonry issue columns

jquery

multiple-columns

jquery-masonry