对我的代码使用砌体JS

我试过应用砌体http://masonry.desandro.com/ JS使图像浮动在对方下，但它似乎并没有工作。对我的代码使用砌体JS

我已经使用了以下功能 - 我做了什么错了？ CSS问题可能？

<script> 
    $(function(){ 

    $('.cycler-wrap').masonry({ 
     itemSelector: '.cycler-container', 
     columnWidth: 100 
    }); 

    }); 
</script>

根据以下Kelvin的回应更新了网站。现在只需一个周期的问题:(

来源

2012-11-08 Dave

这里的问题是你的.cycle-container元素都是0的像素高，因为你的img元素绝对定位，这需要他们出文档的流程。

如果你让你的.cycler img元素position:relative相反，砖石应该按预期工作由于您的图片display:inline，保持循环仪工作，你其实只需要进行第一图像position:relative：

.cycler img{ 
    position: absolute; 
    top:0; 
    left:0; 
} 

.cycler img:first-child{ 
    position:relative; 
}

当然，并不是所有的浏览器都支持:first-child，所以最好将.first类添加到每个组的第一个图像中，并将其用作选择器。

来源

2012-11-08 03:27:47 Kelvin

谢谢开尔文。由于cycler，'.cycler img'元素必须是'position：absolute'。如果我将它设置为相对，则图像中的淡入会混乱。 – Dave

Kelvin有什么其他想法？或者我应该在jsFiddle上抛出一个版本？ – Dave

得到了你 - 看起来你必须设置每个'.cycler'元素的高度，然后，给他们添加'style =“height：123px”'。如果这不是一个选项，最后一个选项可能是复制每个循环组中的一个'img'，但给它一个类，它将被从循环代码中排除，并给它“可见性：隐藏“，这将使其看不见，但仍然占用dom中的空间。凌乱，但它会工作... – Kelvin

对我的代码使用砌体JS

回答

相关问题