具有图像预览的响应式缩略图库

Question

我想问一下如何制作这种图片库（作者fcalderan），

codepen.io/anon/pen/OPMeXM

反应灵敏。我想让它响应的原因是，当我需要在画廊中添加另一个项目时，它会与其余的拇指对齐/或在视口变得太窄时堆叠。我一个人做不到，感谢任何愿意抽出时间提供帮助的人！

更新：我可能不需要 zoom/window 预览来响应，而是让整个画廊在宽度方面响应，这样在添加图像时他的拇指会堆叠并放在下面。

下面是 link 的图像，可以帮助形象化我想要实现的目标。

https://drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/view?usp=drivesdk

非常抱歉各位，谢谢Seiko85

Answer 1

我使用了你的 codepen 示例并添加了 bootstrap 以及相应的类.

看这里：https://jsfiddle.net/hdqgeuqg/

我将 class="container" 添加到 <dl id="simple-gallery"> 并将 class="col-md-3" 添加到所有 <dt> 元素。

然后需要进行一些CSS改编，例如：

dl.container {
    /*height: 488px;*/
    padding: 360px 5px 5px;
    /* ... */
}
dl.container:before { /* ... */ }
dt {
    /*height: 100px;*/
    /* ... */
}

更refined/responsivefiddle:https://jsfiddle.net/hdqgeuqg/3/

具有图像预览的响应式缩略图库

responsive thumbnail gallery with image preview

css

image

gallery

width

responsive