Freewall.js默认为页面加载

我目前正在尝试使用Freewall.js来布局我的内容。我添加了一个带有标题的菜单，用于过滤将显示的内容，例如"所有内容"照片"打印"等。但是我注意到在启动我的页面时，它将内容框堆叠在一起，并有一点偏移。刷新时看起来有点麻烦，它重新排列堆栈，使其看起来像一个纸盒。但是，如果您按"所有内容"，则所有内容框都将放在正确的位置。所以这是我的问题，我如何更改 JS，从某种意义上说，它会立即在 PageLoad 上加载"所有"页面？

添加了我从中获取灵感的示例的链接(该页面具有完全相同的问题(

http://kristynjanae.com/

问候

.JS：

$(函数(( {
var wall = new freewall("#freewall"(;

var images = wall.container.find('.brick');
        var length = images.length;
        images.css({visibility: 'hidden'});
        images.find('img').on("load error", function() {
            -- length;
            if (!length) {
                setTimeout(function() {
                    images.css({visibility: 'visible'});
                    wall.fitWidth();
                }, 505);
            }
});

wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 320,
    cellH: 'auto',
    onResize: function() {
        wall.fitWidth(); 
    }

});
wall.filter(":not(.k1, .k2, .k3, .k4, .k5, .k6)");
$(".filter-label").click(function() {
    $(".filter-label").removeClass("active");
    var filter = $(this).addClass('active').data('filter');
    if (filter) {
        wall.filter(filter);
        wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 320,
        cellH: 'auto',
        onResize: function() {
        wall.fitWidth();
}
        });

    } else {
        wall.unFilter();
    }
});
wall.fitWidth();

}(;

.CSS：

body {
    background: white;
    margin: 0 auto;
    position: relative;
    font-family: open sans, sans-serif;
    /*font-family: 'open sans', sans-serif;*/
    font-size: 15px;
}
nav ul{
    list-style: none;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    padding-left: 15px;
    font-size: 15px;
    text-align: center;

    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
    }
    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
li{
    padding:7px;
}
/*nav ul{
    position:fixed;
    z-index:10000;
}*/

/*----------------for Filter----------------*/
.free-wall {
    margin: 15px;   
}
.brick {
    width:300px;
}
.info {
    padding-top:10px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    color: #333;
    font-weight:500;
}
.brick img {
    margin: 0px;
    padding: 0px;
    /*display: block; */
}
.filter-items {
    /*padding: 15px 0px;
    padding-left:15px;*/
}
.filter-label {
    display: inline-block;
    margin: 0px 2.5px 2.5px 0px;
    padding: 0px,10px,10px,5px;
    cursor: pointer;
    background:#FFF;
}
.filter-label.active{
    color:white;
    background: black;
}
.photography:hover{
    background:#ffe6e6;
}
.everything:hover{
    background:#e6ffe8;
}
.webdesign:hover{
    background: #ffffd9;
}
.dreid:hover{
    background: #befff3;
}
.drawingsart:hover{
    background: #fcd2ff;
}
.projects:hover{
    background: #ffedc8;
}
.study:hover{
    background: #bcc9ff;
}
h1{
    font-size: 30px;
    margin-bottom: 0px;
    /*position:fixed;
    z-index:10000;*/
}
h2{
    font-size: 30px;
    margin:0px 0px;
    /*position:fixed;
    z-index:10000;*/
}


a:active {
    color: #000;
}
a {`enter code here`
    color: #000;
}