构建响应式缩略图库

Question

我正在尝试使用灯箱创建响应式缩略图库。想法是单击图像，这个图像将显示 在灯箱上。

我发现这个好tutorial解释了怎么做 响应式缩略图库。我还找到了装有灯箱的colorbox插件。

我现在的问题是取消。 每次我添加一些文字，线条都会被打破。

这是我正在尝试做的演示。 http://jsbin.com/melaz/1

提前致谢

Answer 1

您可以在显示之前按div对height进行排序。

var sorted = $(".container .galleryItem").sort(function(a, b) {               
  return $(a).height() > $(b).height() ? 1 : -1;
});   

$(".container").html(sorted);

<强> http://jsbin.com/zawexubu/1

Answer 2

而不是float: left;元素使用.galleryItem，请尝试使用display: inline-block;。