文章/答案/技术大牛

发布

社区首页 >问答首页 >引导每行高度相同的thumbnails+caption？

问引导每行高度相同的thumbnails+caption？
EN

Stack Overflow用户

提问于 2015-05-13 04:36:34

回答 3查看 7.2K关注 0票数 4

还有一些相关的问题-- 这里或这里，尽管似乎没有一个适合我。

我遵循引导示例来实现带字幕的缩略图。然而，我的标题文本是不同的长度，造成不同高度的三个缩略图。看起来挺丑的。为了解决这个问题，我尝试了matchHeight jQuery插件，但这并没有效果。

这是我的密码：

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.matchHeight-min.js" type="text/javascript"></script> 
  <script type="text/javascript">                                             
    $(".thumbnail").matchHeight({ byRow: true, });                            
  </script>                                                                   
</head>                                                                       
<body>                                                                        
  ...
  <div class="row">                                                       
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-1.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 1</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-2.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 2</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-3.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 3</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
  </div>                                                                  
  ...
</body>

我在这里错过了什么？我怎样才能使这三个缩略图很好地对齐？

jquery

twitter-bootstrap-3

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-13 15:43:35

最后，我使用了这个答案的巧妙技巧，并编写了自己的代码。#mq-detector元素告诉我媒体查询何时切换，而不必对视图宽度进行硬编码。然后，我连接到窗口的resize回调，以了解用户何时更改浏览器窗口的大小：

<script type="text/javascript">                                             
  (function() {                                                             
    $(window).resize(checkAdjustThumbnailHeight);                   
    $(document).ready(checkAdjustThumbnailHeight);                          
  })();
</script>

在第一次呈现页面时调用checkAdjustThumbnailHeight函数，每次浏览器的resize事件触发时都调用该函数。该函数检查媒体检测器元素并相应地调整缩略图高度：

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插件来推迟调整缩略图高度，直到所有图像完成加载。

票数 1

Stack Overflow用户

发布于 2015-05-13 07:06:42

为js尝试这个：

(function() {
      $(function() {
            $('.thumbnail').matchHeight({
                    byRow: true,
                    property: 'height',
                    target: null,
                    remove: false
            });
      });
 })();

演示：http://plnkr.co/edit/WZsXno08rc9rv3lZfODW?p=preview

票数 1

Stack Overflow用户

发布于 2015-05-13 10:11:51

.thumbnail {
  height: 547px;
  overflow-y: hidden;
}
.img-responsive {
  margin-bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 1</h4> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit maximus nulla id eleifend. Curabitur sit amet tellus vitae orci condimentum aliquam. Aenean facilisis lacinia suscipit. Cras quam massa, pharetra a convallis nec,
          gravida eu metus. Phasellus gravida faucibus nulla, sit amet suscipit purus. Donec luctus, ligula sed finibus congue, libero odio ultricies nulla, a pharetra diam mauris non turpis. Phasellus a aliquet lorem.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 2</h4> 
        <p>Nullam pulvinar posuere arcu ac mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in interdum leo. Nunc sed purus vel eros mollis pharetra sit amet sit amet felis. Ut pharetra mi ac dolor
          dignissim facilisis. Phasellus odio massa, pulvinar sed velit ac, malesuada posuere urna. Aliquam urna eros, sollicitudin et diam quis, lacinia feugiat erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Aenean porttitor, tortor sit amet accumsan placerat, ante augue pretium nunc, vel volutpat turpis ex vitae dui. Etiam imperdiet turpis sed ante posuere, venenatis lobortis lorem pharetra.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 3</h4> 
        <p>Quisque mollis sollicitudin tellus, in sagittis diam rutrum ut. Mauris ex arcu, vehicula et ullamcorper id, viverra vel nibh. Ut vestibulum tellus vel erat lobortis, quis fringilla nulla semper. Proin a varius tortor, ac varius tortor. Sed fringilla
          dignissim neque cursus sit amet. Maecenas molestie hendrerit orci, ut faucibus mauris tempor in.</p>
      </div>
    </div>
  </div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30205766

复制

相似问题

问引导每行高度相同的thumbnails+caption？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导每行高度相同的thumbnails+caption？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导每行高度相同的thumbnails+caption？
EN