Help on multi pinterest layout

[emicoma]

Hi I want to have several pinterest layout on 1 page, not tested, only following each other. Could you please help me with that ? i want something like that

var wall1 = new Freewall(".line-1 .free-wall");
    wall1.reset({
        selector: '.brick',
        animate: true,
        cellW: 200,
        cellH: 'auto',
        onResize: function () {
            wall1.fitWidth();
        }
    });
    wall1.container.find('.brick img').load(function () {
        wall1.fitWidth();
    });
            var wall2 = new Freewall(".line-2 .free-wall");
            wall2.reset({
                selector: '.brick',
                animate: true,
                cellW: 200,
                cellH: 'auto',
                onResize: function () {
                    wall2.fitWidth();
                }
            });

            wall2.container.find('.brick img').load(function () {
                wall2.fitWidth();
            });

this is working but beginner in javascript, i did not succeed to create functionnal code using : $(".free-wall").each(function()

All ideas welcome.. Thanks

[emicoma]

I tried this way too : $(function() { $(".free-wall").each(function() { var wall = new Freewall(this); wall.reset({ selector: '.brick', animate: true, cellW: 200, cellH: 'auto', onResize: function () { wall.fitWidth(); } }); wall.container.find('.brick img').load(function () { wall.fitWidth(); }); } });

no success either..

[emicoma]

solution :

jQuery(function ($) {
        $(".free-wall").each(function() {
        var wall = new Freewall(this);
            wall.reset({
                selector: '.brick',
                animate: true,
                cellW: 200,
                cellH: 'auto',
                onResize: function() {
                    wall.fitWidth();
                }
            });
            wall.container.find('.brick img').load(function() {
                wall.fitWidth();
            });

        });

    });