javascript - jQuery Waterfall 元素不按其 HTML 布局顺序排列

Question

晚上。

我正在使用 jQuery Waterfall，我相信它是一种基于砌体的 pinterest 风格网格布局。

我遇到的问题是元素没有按我希望的那样显示。

假设 html 标记是这样的:

<div id="buildcontainer">

    <div class='blogresults'>ITEM 1</div>

    <div class='blogresults'>ITEM 2</div>

    <div class='blogresults'>ITEM 3</div>

    <div class='blogresults'>>ITEM 4</div>

</div>

检查源代码时，就是标记。然而在我的网站网格中显示的元素如下:

ITEM 3 | ITEM 1 | ITEM 4 | ITEM 2

这通常不会成为问题，除非我根据它们的受欢迎程度来订购内容。我可以破解它并更改内容的顺序，但它都是动态加载的。

有什么帮助吗？我可以使用的 Waterfall 的任何选项。

以我的网站为例:

已解决。

顺序应该是:KTM RC8 |黑色 FABIA VRS |黄色 VRS |奥迪TT

这是我的元素 CSS 样式的情况吗？这是它的样式:

.blogresults { 
border: 0px solid #fff;
background-color: #fff;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
z-index: 500;
disply: inline-block;
float:;
 -webkit-transition: box-shadow 200ms;
 -moz-transition: box-shadow 200ms;
 -o-transition: box-shadow 200ms;
 -ms-transition: box-shadow 200ms;
 transition: box-shadow 200ms;
}

#buildcontainer {
width: 100%;
height: auto;
    margin-top: 5%;
}

在此先感谢您的帮助!

克雷格。

Answer 1

已解决。

这个问题与我将元素包装在标签中有关。将标签移到 .blogresults div 中，一切正常。