kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Thank you! Filters height solved for me #216

Closed petrospap closed 8 years ago

petrospap commented 8 years ago

Hello I am totally new to freewall, and i spend three days to make work pinterest-layout with filters my setup is this

$(function() {
var wall = new Freewall("#freewall");
wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 200,
//  cellH: 'auto',
     cellH: function(height) {
          return height / 10;
     },
    fixSize: 0,
    onResize: function() {
    wall.refresh();
    }
});

$(document).on('click', '.filter-label', function(){
$(".filter-label").removeClass('active');
var filter = $(this).addClass('active').data('filter');
    if (filter) {
        wall.filter(filter);    
    } else {
        wall.unFilter();
    }
});
wall.fitWidth();
});

The trick is

//  cellH: 'auto',
     cellH: function(height) {
          return height / 10;
     },

CSS

.brick {
    float:left;
    width: 221.2px;
    /*min-height:auto;*/
    height:auto;
    max-height: 340px;
}

@media screen and (-webkit-min-device-pixel-ratio:0){ 
.brick {
    float:left;
    width: 221.2px;
    min-height:200px;
    height:auto;
    max-height: 340px;
}
}

.brick a{
height:auto;
}

.brick img {
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    display: block;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.55);
    border-radius: 3px
}

html

<div class="brick poster">
<a href="img/poster1.jpg" data-lightbox="all" data-title="poster1">
<img src="img/poster1_thumb.jpg">
</a>
</div>

<div class="brick illustrator">
<a href="img/illustrator1.jpg" data-lightbox="all" data-title="illustrator1">
<img src="img/illustrator1_thumb.jpg">
</a>
</div>

<div class="brick artwork">
<a href="img/artwork1.jpg" data-lightbox="all" data-title="artwork1">
<img src="img/artwork1_thumb.jpg">
</a>
</div>

etc

Note: I dont use [info] Thumb images dimensions 350X20 +-10px -- 200X200 +-10px -- 200X350 +-10px Also this setup not working in chrome, thats why i add @media screen -webkit Tested: last firefox, last opera, last ie10, last chrome

Happy me.. and Thank you for this amazing script!

kombai commented 8 years ago

Thank you for used Freewall ;)