search

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

Bricks are aligning to the bottom #222

Open atrivino-rightpoint opened 8 years ago

atrivino-rightpoint commented 8 years ago

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!

freewall brick alignment issue

kombai commented 8 years ago

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