CODEWITHSUNDEEP
twitter-bootstrap
Georgi Demirev
Georgi Demirev

Reputation: 456

Bootstrap & Masonry Gutter - Responsive

I've been banging my head for the past 12 hours trying to find a solution to this problem, but I still haven't managed to do so...

I want to set a percentage based value to the Masonry itemSelector (50%, 33.333333% and 25% depending on how many columns I want - 2, 3 or 4) and have a 15px gutter between the items.

How I see it is if I want 4 columns each column should be 25% wide minus 15px (the gutter), but I just can't figure out a way to do it. I must be in some kind of brain lock...

HTML

<div class="container">
    <div id="content">
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
    </div>
<div class="container">

CSS

article {
    background: #333;
    margin-bottom: 15px;
    height: 50px;
}
.post-columns {
    width: 25%;
    float: left;
}
.container {
    background: #dadada;
}

JS

$(document).ready(function () {
    var container = $('#content');

    container.masonry({
        itemSelector: '.post',
        columnWidth: '.post-columns',
        gutter: 0
    }); 
});

Here's a demo: http://jsfiddle.net/4urJT/3/

Thank you!

Upvotes: 0

Views: 1175

Answers (1)

Georgi Demirev
Georgi Demirev

Reputation: 456

Amazingly I managed to do it with my awful JS knowledge! It's not pretty, but it works.

$(document).ready(function () {

    var columnCount = 4;
    var gutter = 15;

    $('.post').width(function() {
        return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
    });

    $( window ).resize(function() {
        $('.post').width(function() {
            return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
        });
    });
    var container = $('#content');

    container.masonry({

        itemSelector: '.post',
        gutter: gutter,

    });     
});

Here's the working demo: http://jsfiddle.net/4urJT/4/

Upvotes: 1

Related Questions