Question

我正在尝试实施此响应式图片库http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/

然而，该示例使用整个视口，但我使用HTML5样板文件和引导程序，我的图片库只显示两列间隔而不是默认的5列显示，因为此处演示显示http://demos.creative-punch.net/masonry-gallery/ < / p>

这是我用1200 + px宽度的容器获得的 enter image description here

我已将整个图库放在容器类中。但我不确定我需要调整哪些CSS属性才能让图像填满整个div。

我该怎么做？

我创建了一个jsfiddle，但我似乎无法复制该问题而不包括整个项目，但希望有人发现这有用并且可以证明正在发生的事情。 http://jsfiddle.net/CVU3r/

    <div class="grid-sizer"></div>

    <div class="item">
        <img src="http://placekitten.com/650/450" class="image">
        <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
                <p>
                    Lorem ipsum dolor sit amet, <br>
                    consectetur adipisicing elit.
                </p>
            </div>
        </a>
    </div>


$(window).load( function() {

$('#container').masonry({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer",
});

});

Answer 1

所以小提琴不是很多帮助，但感谢您发布了可以使用的代码......

使用CSS中默认值的类命名约定，例如class =“image”是一个坏主意。
我对这个小提琴做不了多少......但是我去了演示并做了我认为你想要的。

您想要在所有图库

HTML

<body>
 <div class="galleryContainer">
   //this is where all the code in the gallery goes including the container on the     gallery because it is dynamically changed
 </div>
</body>

CSS

.galleryContainer{
   width: 50%;   //or whatever you would like
   height: 600px;   //or whatever you would like
   margin: 0 auto; //center the gallery horizontally
   overflow: auto; //allows you to scroll the gallery when some pictures cant be displayed
}

之前的代码也允许所有重新调整大小和移动兼容性工作正常。希望这有帮助

Finished Gallery

使用砌体的响应式图库

1 个答案: