javascript - 使用书签时 li 元素垂直折叠

Question

我正在制作这个网站:

http://frankkluytmans.nl/testsite/

并制作一个 ListView ，其中我使用 wookmark jquery 插件使列表项垂直对齐。现在列表项垂直折叠(见链接)。我该怎么做才能解决这个问题？

CSS:

#content ol {
    position: relative;
    display: block;
    margin-left: -2%;

    list-style-type: none;
}

#content ol li {
    display: block;
    width: 18%;
    height: auto;
    margin-left: 2%;
    margin-bottom: 20px;
    padding: 3px;

    background: white;
    float: left;    
}

#content ol li img {
    width: 100%;
    border: none;   
}

JS:

$('#content ol li').wookmark({
     container: $('#content ol'),
     offset: 20
});

Answer 1

我能够自己想出一个解决方案。事实证明，webkit 浏览器需要先加载图像才能计算出列表元素的正确高度。

我调整了我的 JS:

 $("img").load(function() {
        $('#content ol li').wookmark({
            container: $('#content ol'),
            offset: 15
        });
    });