自举网格中的变量高度

我很抱歉，如果这已被回答之前。我做了搜索，发现了一些关于这个问题的线索，但我仍然努力工作。我希望为我的代码特定的解决方案。自举网格中的变量高度

我目前有一个引导网格系统，并在每个面向横向的图片下面都有额外的死区。

我希望图像（垂直）之间的间距相同，而不管它们的高度如何。我的图片是900px x 558px或558px x 900px。

我想这个布局函数与Pinterest相似。

HTML（我已经删除2，3和4）：

<div class="pages section"> 
    <div class="container"> 
     <div class="pages-head"> 
      <h3>PORTFOLIO</h3> 
      <div class="underline"></div> 
      <h7> BRIDAL MAKEUP </h7> 
     </div> 
     <div class="portfolio"> 
      <ul class="simplefilter"> 
       <li class="active" data-filter="1"><p>BRIDAL 1</p></li> 
       <li data-filter="2"><p>BRIDAL 2</p></li> 
       <li data-filter="3"><p>BRIDAL 3</p></li> 
       <li data-filter="4"><p>BRIDAL 4</p></li> 
      </ul> 
      <div class="row"> 
       <div class="filtr-container"> 

        <!-- bridal gallery 1 photos --> 

        <div class="col s6 filtr-item col-pd" data-category="1"> 
         <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-1.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-1.jpg" alt="sample image"></a> 
        </div> 

        <div class="col s6 filtr-item col-pd" data-category="1"> 
         <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-2.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-2.jpg" alt="sample image"></a> 
        </div> 

        <div class="col s6 filtr-item col-pd" data-category="1"> 
         <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-3.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-3.jpg" alt="sample image"></a> 
        </div> 

        <div class="col s6 filtr-item col-pd" data-category="1"> 
         <a href="../img/portfolio/bridal/gallery_1/bridal_gallery_1-4.jpg" class="image-popup"><img class="responsive-img" src="../img/portfolio/bridal/gallery_1/bridal_gallery_1-4.jpg" alt="sample image"></a> 
        </div> 

        <!-- end bridal gallery 1 photos --> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- end portfolio single -->

CSS：

.container { 
    width: 70%; 
} 

.container .row { 
    margin-left: -0.75rem; 
    margin-right: -0.75rem; 
} 

.row { 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 20px; 
} 

.row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.row .col { 
    float: left; 
    box-sizing: border-box; 
    padding: 0 0.75rem; 
    min-height: 1px; 
} 

.row .col[class*="push-"], .row .col[class*="pull-"] { 
    position: relative; 
} 

.row .col.s6 { 
    width: 50%; 
    margin-left: auto; 
    left: auto; 
    right: auto; 
}

的Javascript：

$(function(){ 
    'use strict'; 

    // portfolio filter container 
    $('.filtr-container').filterizr('filter', '1'); 

    // portfolio filter 
    $('.simplefilter li').click(function() { 
     $('.simplefilter li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 

    // portfolio image-popup 
    $(".image-popup").magnificPopup({ 
     type: "image", 
     removalDelay: 300, 
     mainClass: "mfp-fade" 
    }); 

});

任何帮助是非常感谢！

来源

2017-05-25 hipsiguy

此问题的解决方案是您在选项中实例化Filterizr的布局。

只要在图像中有可变的高度，就应该使用相同的宽度或打包的布局，以实现类似布丁的布局。

要做到这一点，你需要实例化Filterizr这样的：

$('.filtr-container').filterizr({ layout: 'sameWidth' });

或

$('.filtr-container').filterizr({ layout: 'packed' });

来源

2018-01-22 19:54:11 giotiskl

自举网格中的变量高度

回答

相关问题