Question

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

在我看来，我想要一个带有几列图像的整页宽度。问题是接下来，使用此代码，我只有2列;事实上，在列中我只有图像。

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

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

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

Answer 1

您的代码存在一些问题。您正在使用html和javascript中的数据属性在2个位置设置砌体参数。你正在使用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 -------回应你的意见

你试图在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>

不像他们现在那样在他们面前。

砌体问题专栏

1 个答案: