使用砌体的自适应图像库

debugcn 发表于 Dev

皮克斯

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

但是，该示例使用了整个视口，但我使用的是带有引导程序的HTML5样板，并且我的图片库仅显示了两行，但没有默认的5列显示，如演示在此处所示：http：//demos.creative-punch .net / masonry-gallery /

这是我用1200+ px宽度的容器得到的在此处输入图片说明

我已将整个画廊放置在一个容器类中。但是我不确定必须调整哪些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",
});

});

周杰伦

因此，小提琴并没有提供太多帮助，但感谢您发布了可以提供的代码...

使用CSS中默认的类命名约定（例如class =“ image”）是个坏主意。
我不能用小提琴做很多事情...但是我去了演示，并按照我的想法进行了此操作。

您将要在所有图库周围添加包装器div

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

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

成品画廊