Joe R. Joe R. - 9 months ago 105
Javascript Question

freewall.js plugin works only after resize

So, I'm testing this awesome jquery plugin called freewall.js.
It seems to work absolutely fine, however, only after resizing the page.

On first load, the blocks appear too close to each other in a really messed up fashion. A little resize on the page and voilá! it's perfect.

This is the code i'm using (provided by the example file, which seems to work just fine on their server):

<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><img src='{index}.gif' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 10;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);

var wall = new Freewall("#freewall");
selector: '.brick',
animate: true,
gutterY: 15,
gutterX: 15,
cellW: 150,
cellH: 'auto',
onResize: function() {

var images = wall.container.find('.brick');
images.find('img').load(function() {

Here's the css style:

<style type="text/css">
body {
background-color: #557f9d;
font-size: 13pt;
font-family: 'Source Sans Pro', sans-serif;
font-size: 15pt;
font-weight: 300 !important;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.75em;

.free-wall {
margin: 0px;
.brick img {
margin: 0;
display: block;

And here's the page in question:

Example page

Thanks in advance!


Try this :

$(document).ready(function() {

EDIT: The code is simple, once the document is ready, it triggers the code that is bound to the resize handler, in your case the whole wall thingy is tied to it. So the first thing that the javascript do once everything is up and running is call the code and the plugin does its wonder in the back. Glad I could help.