In this post, I will be sharing my knowledge on implementing pinterest layout on Sencha-Touch 2.
Know How To:
All I did was, mapped the piece of code, that generates pinterest style in jquery. I just ported the jquery methods to corresponding SenchaTouch/Javascript methods. Excellent tutorial on how to create pinterest layout
This is the function that does the magic, snippet at app/controller/PinterestController.js near line 89.
generatePinterest : function() {
/**
*This is the function that does the Pinterest Magic!!!
*/
var colCount = 0;
var colWidth = 140;
var margin = 10;
var spaceLeft = 0;
var windowWidth = 0;
var blocks = [];
// windowWidth = $(window).width();
var windowWidth = (window.innerWidth > 0) ? window.innerWidth
: screen.width;
console.log(windowWidth)
blocks = [];
// Calculate the margin so the blocks are evenly spaced
// within the window
colCount = Math.floor(windowWidth
/ (colWidth + margin * 2));
console.log(colCount)
spaceLeft = (windowWidth - ((colWidth * colCount) + (margin * (colCount - 1)))) / 2;
console.log(spaceLeft);
for ( var i = 0; i < colCount; i++) {
blocks.push(margin);
}
Ext.select('.block').elements.forEach(function(element,
i) {
// var min = Array.min(blocks);
// console.log(Array.min)
var min = Math.min.apply(Math, blocks)
console.log("min:", min)
var index = blocks.indexOf(min);
// var index = $.inArray(min, blocks);
// console.log(this)
// var index=blocks
var leftPos = margin
+ (index * (colWidth + margin));
console.log(leftPos)
element.style.left = (leftPos) + 'px';
element.style.top = min + 'px';
console.log("outerheight:", element.offsetHeight)
blocks[index] = min
+ Ext.get(element).getSize().height
+ margin;
})
}
At the instance of adding the pinterest layout to the viewport, resize listener checks for the screen height/width and invokes the generatePinterest fn, which preserves the layout.
generateView : function(showMain) {
console.log('i')
// console.log(showMain)
Ext.getCmp('cardLayout').destroy();
Ext.Viewport.add({
// xclass : PinterestStyle.view.Communitypt,
xclass : showMain,
showAnimation : {
type : 'pop',
duration : 1000,
direction : 'up'
},
listeners : {
resize : function() {
console.log(this)
this.generatePinterest();
//resize() listener for viewport width/heigth and the layout is preserved
},
scope : this
}
})
this.generatePinterest();
//call on page invocation
}
The Project is hosted at github: SenchaTouch2-Pinterest