0

我有一个包含大量 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();

});
4

1 回答 1

0

一种简单的方法是使用 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;

}
于 2013-07-12T18:46:37.927 回答