jquery - 使用 jquery 将 div 的选择变成网格

Question

我有一个包含大量 div 的页面，我正尝试使用 jquery 将其动态放入 4 列。

http://www.jeremymcminn.com/trent

不是将 div .item 分别放在 4 列中，而是将它们相互嵌套在一列中(除了第 2 列中的一个)。

对于我做错了什么以及如何将 .item div 分成 4 列，我们将不胜感激。下面的代码是我正在使用的。

$( function() {

    var kLazyLoad = $K.lazyLoad,
        kLazyLoadInit = $K.lazyLoadInit,
        kPageLoading = false,
        kColNext = 0,
        kColLength = parseInt( $('#grid').attr('class').replace('col-',''), 10 ),
        regaleLazyLoad = function(override) {
            if (override) { kLazyLoad(); }
        },
        regaleLazyLoadInit = function(override) {
            $K.lazyLoadInit();
            setTimeout( function() { $K.lazyLoad(true); }, 100);
        }

    $K.lazyLoad = regaleLazyLoad;
    $K.lazyLoadInit = kLazyLoadInit;

    (function() {
        var colContainer = '';
        for ( var i = 0, len = kColLength; i < len; i++ ) {
            colContainer += $('#grid').html();
        }
        $('#grid').html(colContainer);
    })();

    var updateGrid = function() {
        kPageLoading = false;
        $('#container > .item').each(function(i,item) {
            $(item).appendTo($('.column:eq('+kColNext+')'));
            kColNext = (kColNext+1 >= kColLength) ? 0 : kColNext+1;
        });
        window.setTimeout(function() {
            var longestCol, shortestCol;
            $('.column').each(function(i,column) {
                if (!longestCol || $(column).outerHeight(true) > longestCol.outerHeight(true)) {
                    longestCol = $(column);
                }
                if (!shortestCol || $(column).outerHeight(true) < shortestCol.outerHeight(true)) {
                    shortestCol = $(column);
                }
            });
            var lastItem = longestCol.find('.item:last');
            lastItem.css('display','none');
            window.setTimeout(function() {
                if (longestCol.outerHeight(true) - shortestCol.outerHeight(true) > shortestCol.outerHeight(true)/3) {
                    lastItem.appendTo(shortestCol);
                }
                lastItem.css('display','block');
                regaleLazyLoad(true);
            },1);
        },50);
    }

    $(window).off('.rjs').on('scroll.rjs', function() {
        regaleLazyLoad(true);
        if (kPageLoading) { return false; }
        if ( $(document).scrollTop() + $('#grid').offset().top > ($('#grid').offset().top + $('#grid').height()) - $(window).height()*3 || $('.k-lazy-loading').length < 15 ) {
            kPageLoading = true;
            $K.infinity.next();
        }
    });

    $K.infinity.check = $.noop;

    $(window).on('k-infinite-loaded', updateGrid).trigger('k-infinite-loaded');
    $(window).on('k-resize', function() {
        regaleLazyLoadInit();
    });

    regaleLazyLoadInit();

});

Answer 1

一种简单的方法是使用 UL/LI 而不是 DIV。然后将 LI 元素向左浮动，并使 UL 包装器成为 LI 元素宽度的 4 倍。您应该能够使用 CSS 做到这一点。

无论如何，一组元素实际上是一个列表，因为 UL/LI 模式在语义上更有意义。

使用，例如:

ul {
    margin:0;
    padding:0;
    list-style:none;
    width: 800px
}

li {
    float:left;
    width:200px;

}