javascript - jquery同位素水平元素重叠

Question

我正在尝试做一个水平同位素，如果你看看下面的小提琴，你会发现问题：

元素重叠...

<div class="cal">
<div class="col">
    <div class="head">
        1                
    </div>
    <div class="clear"></div>
    <div class="container">
         <div class="shape">
             <div class="inner-wrapper">
                 <div class="event">
                     <div class="main-avatar">
                         <a href="#">
                             img <p style="display: inline; margin-left: 3px;">name</p>
                         </a>
                     </div>
                     <h5><a href="#">something</a></h5>
                 </div>
                 <p style="padding-bottom: 0px">home</p>
                 <p style="padding-bottom: 0px">9:00 AM-9:00 AM</p>
             </div>
             <div class="">
                 <a href="#">More...</a>
             </div>
        </div>
        <div class="shape">
             <div class="inner-wrapper">
                 <div class="event">
                     <div class="main-avatar">
                         <a href="#">
                             img <p style="display: inline; margin-left: 3px;">name</p>
                         </a>
                     </div>
                     <h5><a href="#">something</a></h5>
                 </div>
                 <p style="padding-bottom: 0px">home</p>
                 <p style="padding-bottom: 0px">9:00 AM-9:00 AM</p>
             </div>
             <div class="">
                 <a href="#">More...</a>
             </div>
        </div>
        <div class="shape">
             <div class="inner-wrapper">
                 <div class="event">
                     <div class="main-avatar">
                         <a href="#">
                             img <p style="display: inline; margin-left: 3px;">name</p>
                         </a>
                     </div>
                     <h5><a href="#">something</a></h5>
                 </div>
                 <p style="padding-bottom: 0px">home</p>
                 <p style="padding-bottom: 0px">9:00 AM-9:00 AM</p>
             </div>
             <div class="">
                 <a href="#">More...</a>
             </div>
        </div>
    </div>                
</div>

您可以查看和测试的示例

有趣的是，如果你调整窗口的大小，同位素会使元素正确......

这是同位素的错误还是我做错了什么？

任何帮助都会很棒...

谢谢克里斯

Answer 1

我无法告诉您问题出在哪里，但我注意到它在窗口调整大小时会自行修复，因此我将其添加到您的代码中：

$(window).resize();

现在它可以工作了。