Pinterest style fluid two-wide list view


#1

Has anyone managed to create a UI that handles an item list like the Pinterest iOS app? This is a two-wide list of variable height items. I was thinking of using the cards with fixed widths in a two column grid. Ideally each column would scroll independently.


#2

I success to show list look like Pinterest app.
But I want to use “Collection repeat” to repeat my data
anyone can help, or advice !

Thank you.


#3

Hi,

Can you please share your code to create a list with this design?
In order to use the collection repeat, you can can use this code in a factory :

.factory('Ads', function (LocalStorage, ErrorMessages) {

	return {
		all: function(scope) {
			var ads = Parse.Object.extend("Ads");

			var query = new Parse.Query(ads);

			var adlist = [];
			query.descending("createdAt");
			query.limit(10);
			query.find({
				success: function(results) {
					scope.$apply(function() {	
						var index =0;
						var Arrlen=results.length ;

						for (index = 0; index < Arrlen; ++index) {
							var obj = results[index];

							scope.ads.push({ 
								img1 :  obj.attributes.Img1,
								title: obj.attributes.Title,
								content:  obj.attributes.Content
							});
						}
					});
				},
				error: function(error) {
					alert("Error: " + error.code + " " + error.message);
				}
			})
		} 
})

In the Controller :

$scope.ads = [];
	
$ionicPlatform.ready(function() {
	Ads.all($scope);
});

And the html for for list :

<ion-list can-swipe="listCanSwipe">
	<ion-item ng-repeat="ad in ads" class="item-thumbnail-left">
		<img ng-src="data:image/jpeg;base64,{{ad.img1}}">
		<h2>{{ad.title}}</h2>
		<p>{{ad.content}}</p>
	</ion-item>
</ion-list>