页面加载时的Freewall.js默认值

Question

我最近尝试使用freewall.js来布局我的内容，我添加了一个带有标题的菜单，用于过滤将要显示的内容，例如“一切”、“照片”、“打印”等等。但我注意到，当启动我的页面时，它将内容框堆叠在一起，并有一点偏移量。它在刷新时看起来有点buggy，它重新排列了堆栈，使它看起来像一个卡片盒。但是如果你按下“一切”，所有的内容框都会放到合适的位置。因此，我的问题是，如何更改js，使其在pageload上立即加载“一切”页面？

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

http://kristynjanae.com/

问候

JS：

$(function() {

 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;

}

Answer 1

您必须移动此块代码：

         `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);                 }             });` 

进入这个函数：

        $(function() {
            var wall = new freewall("#freewall");
            ....
            ....
        });