Question

我目前尝试使用freewall.js来布局我的内容。我添加了一个带有字幕的菜单，用于过滤将显示的内容，例如“所有内容”，“照片”，“打印”等等。但是我注意到在启动我的页面时，它将内容框堆叠在一起，并带有一点偏移量。刷新时它看起来有点儿马车，它重新排列堆栈，使它看起来像一个卡片盒。但如果按“所有内容”，所有内容框都将放在适当的位置。所以这里是我的问题我如何在这种意义上改变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");
            ....
            ....
        });

Freewall.js默认页面加载

1 个答案: