砌体问题列

Question

我想通过添加一种新类型的画廊（简单来说，它是关于石工）来重新设计我的网站。

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

The code：

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，但您的项目使用百分比。 这是更新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%;} 

查看HTML至于如何使用的网格尺寸调整器。 我删除你的数据属性设置以及

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

您正在尝试调用JS之前imagesloaded和砖石文件甚至装，所以你会得到一个“未定义”的错误。

这：

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

没有在他们面前，因为你现在有。