How to align multiple items below each other in Bootstrap 3? - meteor

Question

I'm creating an app with Meteor using alethes:pages package for the pagination and Bootstrap 3 for the styles.
In the main page I'm displaying multiple items (3 per row) using infinite scroll.
The problem comes when an item is higher than his neighbour items, making the next row to have a free space and floating one item to the right, instead of appearing below the higher one. Here you can see the problem:
I made an HTML template for the item to be used by the pagination package.
So, for the example shown in the image, the generated code will be this one:
<div class="col-md-10 col-lg-10 col-md-offset-2 col-lg-offset-2">
<div class="pagesCont">
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 1
</h4>
<a href="#">
<img src="/cfs/files/images_publications/jvtQWo4KSziMXCryh/300x340.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 1 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 2
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 2 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 3
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 3 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 4
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 4 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 5
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 5 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 6
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 6 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 7
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 7 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 8
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 8 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="col-md-12 col-lg-12 well">
<h4 class="break-word">
Item 9
</h4>
<a href="#">
<img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
</a>
<h5 class="col-md-8 col-lg-8 break-word">
Category
</h5>
<h4 class="col-md-4 col-lg-4 text-right"> 9 €</h4>
<div>
<div class="col-md-12 col-lg-12">
UserName UserLastName
</div>
</div>
</div>
</div>
</div>
</div>
I could make the items to have the same hight but I want to have different image sizes and multiline text without leaving free space inside the item.
I want something like the items list shown in this web: http://es.wallapop.com/
But the problem with that list is that uses absolute positions in order to display an item below each other. I would like to avoid absolute positions since I think it wouldn't be so easy to integrate with the package mentioned before.
I don't know if something like this is possible in Bootstrap 3 without using absolute positions.

Answer 1

This has little to do with meteor or pagination I believe.
What you are looking for is to probably implement masonyjs with bootstrap. Layouts like these can get really interesting and tricky. I would definitely look into that combo.

Answer 2

Following the conversation in the comments:
After a lot of research and testing I finally got Masonry to work perfectly with the alethes:pages package. I know, in my last comment I said that I gave up on this, but after some time with my homemade infinite scroll I realized that it wasn't reacting to the mongodb changes, it was static. I didn't want to spend more time on that...
Before showing you the code that makes the magic you have to have some things in mind:
The best way to use Masonry is by using Isotope, at least for me that was the case. I recommend you to install this meteor package: isotope:isotope
You will also need the ImagesLoadead library: iamkevingreen:imagesloaded
The alethes:pages package uses the document.body.offsetHeight DOM property as the total page height, in order to load new items when scrolling. If you are using Bootstrap that property may not represent the total page height, so every scroll made can add new items no matter what you set in the infiniteTrigger option. The way to fix this is by adding a clearfix before closing the body:
<template name="MasterLayout">
...
{{> yield}}
<div class="clearfix"></div>
</template>
The items container used by Masonry must have padding: 0 (at least left and right) in order to be displayed correctly using Bootstrap.
Now, let's see the code.
This is the server code:
Items = new Meteor.Collection('items');
ItemsPagination = new Meteor.Pagination(Items, {
templateName: "ItemsList",
itemTemplate: "Item",
divWrapper: 'container',
infinite: true,
infiniteTrigger: 0.8,
pageSizeLimit: 1512,
dataMargin: 0,
perPage: 21
});
These are the templates used by the pagination object:
<template name="ItemsList">
{{> pages}}
</template>
<template name="Item">
<div class="ms-item col-md-4 col-lg-4">
<div class="well clearfix">
<h4>{{name}}</h4>
<!-- Using CFS package in a global helper to retrieve the item image -->
{{#with getPhoto photo}}
<a href="#">
<img src="{{url store='images_items'}}" alt="No photo" class="img-responsive img-thumbnail" />
</a>
{{/with}}
<!-- Using a global helper to get the item category -->
{{#with getCategory category}}
<h5 class="col-md-8 col-lg-8"> {{name}} </h5>
{{/with}}
<h4 class="col-md-4 col-lg-4 text-right"> {{price}} €</h4>
<div>
<div class="col-md-12 col-lg-12">
<!-- Using a global helper to get the item owner -->
{{#with getUser owner}}
{{#with profile}}
<a href="#" class="break-word">
{{ [first-name] }} {{ [last-name] }}
</a>
{{/with}}
{{/with}}
</div>
</div>
</div>
</div>
</template>
These is the code used by the ItemList template:
var observer, container;
Template.ItemList.onRendered(function() {
container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
});
container.isotope('layout');
});
//Using a MutationObserver to readapt the layout when a new item is added
observer = new MutationObserver(function(mutations) {
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
});
//Adding the MutationObserver to the items container
observer.observe(container.get(0), {
attributes: false,
childList: true,
characterData: false
});
});
And finally, this is the usage of the template:
<template name="myTemplate">
<div class="col-md-12 col-lg-12">
{{> ItemsList}}
</div>
</template>
That's how I made it. Hope this helps someone ;)
EDIT
I have found a better way to do all this (without a MutationObserver I mean). Instead, I'm using the _uihooks object provided by Meteor:
Template.ItemList.onRendered(function() {
var container = $('#container');
//Load Isotope with Masonry
container.imagesLoaded(function() {
container.isotope({
layoutMode: 'masonry',
itemSelector: '.ms-item',
transitionDuration: '0.1s'
}).isotope('layout').isotope();
});
//Using uihooks instead of MutationObserver
container[0]._uihooks = {
insertElement: function(node, next) {
$(node).insertBefore(next);
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
},
removeElement: function(node, next) {
$(node).remove();
container.imagesLoaded(function() {
container.isotope('reloadItems').isotope('layout').isotope();
});
}
};
});