jquery - 不同定位的列 css

Question

有一些插件可以制作 pintrest 样式的列，这些列基本上是在为每个元素计算具有唯一绝对定位的 div 的放置位置。我的设计更简单，我认为应该有一个 css3 解决方案...

你能把其他每一列都向下推 20px 吗？该设计是响应式的，因此取决于浏览器大小将取决于有多少列，所以我不只是想将每一列包装在一个 div 中并将其向下移动......

http://jsfiddle.net/3eVHU/1/

$('.container div').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            listInRow++;
        }
        else {
            listInRow++;   
        }
    });

所以不知何故，在我的 fiddle 中，我需要一种方法来计算第一行中的 div 数量，并将所有其他元素/行向下定位，就像下面这张照片一样

有什么方法可以简单地做到这一点，或者我是否仍然需要使用诸如砖石或其他 pintrest 风格的复制库之类的东西？

Answer 1

http://css-tricks.com/seamless-responsive-photo-grid/

嘘!不能说我发现这个有多兴奋。我的计算脚本无法在第一行找到我需要的元素数量，但它在没有任何 JS 的情况下至少可以定位元素!