Bootstrap缩略图+每行高度相同的标题?
这里或这里有相关的问题,虽然似乎没有一个对我有用。
我已经按照Bootstrap示例来实现带有标题的缩略图 。 但是,我的标题文本具有不同的长度,导致三个缩略图的高度不同。 这看起来很丑陋。 为了解决这个问题,我尝试了matchHeight jQuery插件,但是没有效果。
这是我的代码:
$(".thumbnail").matchHeight({ byRow: true, }); ... ...
我在这里想念的是什么? 如何让这三个缩略图很好地对齐?
.thumbnail { height: 547px; overflow-y: hidden; } .img-responsive { margin-bottom: 30px; }
试试这个js:
(function() { $(function() { $('.thumbnail').matchHeight({ byRow: true, property: 'height', target: null, remove: false }); }); })();
演示: http : //plnkr.co/edit/WZsXno08rc9rv3lZfODW?p = preview
我最终在这个答案中使用了一个巧妙的技巧,并编写了我自己的代码。 #mq-detector
元素告诉我何时切换媒体查询而不必硬编码视口宽度。 然后我迷上了窗口的resize
回调,知道用户何时更改了浏览器窗口的大小:
checkAdjustThumbnailHeight
函数在第一次呈现页面时调用,并且每次触发浏览器的resize
事件时都会调用。 该function检查媒体检测器元素并相应地调整缩略图高度:
function checkAdjustThumbnailHeight() { if ($("#mq-detector > span.visible-lg").is(":visible")) { adjustThumbnailHeight(); } else if ($("#mq-detector > span.visible-md").is(":visible")) { adjustThumbnailHeight(); } else if ($("#mq-detector > span.visible-sm").is(":visible")) { inheritThumbailHeight(); } else if ($("#mq-detector > span.visible-xs").is(":visible")) { inheritThumbailHeight(); } else { } }
请注意,对于sm
和xs
(实际像素值,请参见此处 )尺寸,我不会修改缩略图高度,因为在这些情况下缩略图会一个在另一个上方呈现,而不是彼此相邻。 对于md
和lg
大小,我将缩略图高度设置为最大高度:
function adjustThumbnailHeight() { var heights = [ ]; $(".thumbnail").each(function() { heights.push( $(this).height() ); }); var max = Math.max.apply(null, heights); $(".thumbnail").each(function() { $(this).height(max); }); } function inheritThumbailHeight() { $(".thumbnail").each(function() { $(this).css("height", "inherit"); }); }
这似乎工作正常。
附录由于某些图像可能需要更长时间才能完成加载,因此缩略图的高度可能会偏斜。 因此,我使用imageLoaded插件来推迟调整缩略图高度,直到所有图像都完成加载。