自舉網格中的變量高度

我很抱歉，如果這已被回答之前。我做了搜索，發現了一些關於這個問題的線索，但我仍然努力工作。我希望爲我的代碼特定的解決方案。自舉網格中的變量高度

我目前有一個引導網格系統，並在每個面向橫向的圖片下面都有額外的死區。

我希望圖像（垂直）之間的間距相同，而不管它們的高度如何。我的圖片是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

自舉網格中的變量高度

回答

相關問題