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包装器4 x LI元素的宽度。你应该能够用CSS做到这一点。

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

使用，例如：

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

li {
    float:left;
    width:200px;

}

使用jquery将div的选择转换为网格

1 个答案: