in Server.js
var $ = require('jQuery')
var Freewall = require('freewall')
var app = Ractive.extend({
el: 'main'
})
app = new app()
layoutGrid()
function layoutGrid(){
$.fn.freewalltize = function(opts) {
if (!opts) opts = {};
this.each(function() {
var $el = $(this);
var widthReference = $el.children().first().width();
var wall = new Freewall(this);
reset();
imagesLoaded(this, reset);
function reset() {
wall.reset({
selector: opts.selector || '.thumb',
animate: false,
cellW: 200,
cellH: 'auto',
fixSize: 1,
gutterX: opts.gutterX || 20,
gutterY: opts.gutterY || 20,
onResize: function() {
wall.fitWidth();
wall.refresh();
}
});
wall.fitWidth();
}
})
}
$('[freewall]').freewalltize();
}
HTML
<div freewall>
{{#items}}
<div class="thumb">
<img src=“{{img}}”/>
</div>
{{/items}}
</div>
Using freewalljs and NodeJS with Ractive templates
Once I managed to make it work, but it didn't show any grid layout. After a while, freewall does not work. Then I saw on console.log: Uncaught TypeError: Freewall is not a function. I looked through and couldn't find why.