Bricks are aligning to the bottom

[atrivino-rightpoint]

Hello!

I am encountering the issue where bricks are aligned at the bottom of each row. I would like my layout to look like the pinterst layout.

My HTML looks like this:

<div class="gallery">           
    <div class="brick ">
                <img src="http://lorempixel.com/200/175/abstract/"/>
                <div class="info">
                    <div class="header">Header</div>
                    <div class="description">Description</div>
                    <div class="tags">Tags</div>
                </div>
                <img src="http://lorempixel.com/200/175/abstract/"/>
                <div class="info">
                    <div class="header">Header</div>
                    <div class="description">Description</div>
                    <div class="tags">Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags</div>
                </div>
    </div>
</div>

and my js looks like this:

        $(function() {
            var wall = new Freewall(".gallery");
            wall.reset({
                selector: '.brick',
                animate: true,
                cellW: 180,
                cellH: 'auto',
                fixSize: 0,
                gutterY: 'auto',
                onResize: function() {
                    wall.refresh();
                }
            });


            wall.container.find('.brick img').load(function () {
                wall.fitWidth();
            });
});

Please help.

Thanks so much in advance!

[kombai]

Hi,
you might change your html code like that:

<div class="gallery">           
    <div class="brick ">
                <img src="http://lorempixel.com/200/175/abstract/"/>
                <div class="info">
                    <div class="header">Header</div>
                    <div class="description">Description</div>
                    <div class="tags">Tags</div>
                </div>
   </div>

   <div class="brick">
                <img src="http://lorempixel.com/200/175/abstract/"/>
                <div class="info">
                    <div class="header">Header</div>
                    <div class="description">Description</div>
                    <div class="tags">Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags Tags</div>
                </div>
    </div>
</div>

Best