javascript - 填充列表元素中的空白区域

Question

我有一个流动的网格(高度和宽度)。 LI 始终为矩形，并根据屏幕尺寸自行调整。

现在我需要填充列表，使它们都具有相同的高度。如果所有列都有一个 LI 元素，这将很容易。但是有双倍大小的列，其中一些可以包含大尺寸的 LI。在某些情况下，列的中间甚至有空位，因为有一个大李和一个小李，紧接着又是一个大李。

在某些内容页面上，所有 li 都在一个列中。

在每种情况下，li 都向左浮动。我做了一些图片来解释这个问题:

首先，我想数数 child 的数量并进行比较。但是，当所有 LI 都在一个列中或列中间缺少一个 LI 时，事情就变得复杂了。

这是我尝试过的:

var longest = 0

$("ul.grid-col").each(function(){
    var liCount, $that = $(this);
    liCount = $that.find("> li").length;

    if ($that.is(".double")){
       if( $that.find("li.big").length ){
          var bigCount = $that.find("li.big").length
          liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
       }
     liCount = liCount / 2

    }

    if ( longest < liCount ){
       longest = liCount
    }
})

现在我知道我需要多少 LI 来填充空白空间，很容易填充它们。但是我怎么知道 li 的中间是否有空格呢？您将如何处理单列的特殊情况？

Answer 1

我让这个在 FF 中工作。希望我理解你的问题是正确的。我试图通过构建一个 html shell 来模拟你的情况。我不确定它是否与您的代码匹配，但我基于您的图片。

我的方法的要点如下:

单列 ul 非常简单。遍历所有 ul 以查看最大高度是多少。将 maxHeight 除以 li 高度，然后根据需要添加 li 以进行填充。

双倍宽度的 ul 有点棘手。我创建了一个简单的数组来表示构成双宽列的单个空格。然后，我遍历每个 li 并在适当的地方更新空间索引的状态。如果在需要单的地方出现双，那么我添加一个新的 li。到达双 ul 的 li 数组的末尾后，我再次检查 spaces 数组以确保 ul 的末尾没有任何空值。

希望代码比我的解释更清楚一点。 :)

    <style type="text/css">*               {margin:0; padding:0; list-style:none; border:none; outline:none;}

    body            {}

    ul              {float:left; display:inline; background:#efefef; position:relative;}
    ul.single       {width:50px;}
    ul.double       {width:100px;}
    li              {float:left; display:inline; background:#dddddd; -moz-border-radius:10px;}
    li.single       {height:50px; width:50px;}
    li.double       {height:100px; width:100px; background:#999999;}

    .added          {background:#990000 !important;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
        var maxHeight = 0;
        var maxWidth = 0;

        // Update the ul to manually set height and widths.
        $('ul').each(function(){
            var height = $(this).outerHeight();
            var width = $(this).outerWidth();

            $(this).css({
                'height': height,
                'width': width
            });

            if(height > maxHeight) {maxHeight = height;}
            if(width > maxWidth){maxWidth = width;}
        });

        var single = 50;
        var double = 100;

        // go over the li's and see if any spaces are empty.
        $('ul').each(function(){
            if($(this).hasClass('single')){
                var totalSpaces = maxHeight / single;
                var liCount = $(this).find('li').length;

                for(var i = liCount; i<totalSpaces; i++){
                    $(this).append('<li class="single added">&nbsp;</li>');
                }
            } else {
                // Abstract a two column grid.
                var totalSpaces = maxHeight / single * 2;

                // Set up an array representation of the spaces.
                var spaces = [];

                // Preset all spaces as empty.
                for(var i=0; i<totalSpaces; i++){
                    spaces.push(false);
                }

               var currentSpace = 0;

                // Iterate over the li's and update spaces array.
                $(this).find('li').each(function(index, ele){
                    if($(ele).hasClass('single')){
                        spaces[currentSpace] = true;
                        currentSpace++;
                    } else {
                        // Is this the right column?  (is the currentSpace odd?)
                        if(currentSpace % 2 != 0){
                            // Insert a single li.
                            $(ele).before('<li class="single added">&nbsp;</li>');
                            spaces[currentSpace] = true;
                            currentSpace++;
                        }
                        for(var i=currentSpace; i<(currentSpace + 4); i++){
                            spaces[i] = true;
                        }
                        currentSpace+=4;
                    }
                });

                // finally, go back over the spaces array and fill in any missing li's from the end.
                var me = $(this);
                $(spaces).each(function(index, ele){
                    if(!ele){
                        // insert a single li at the end.
                        $(me).append('<li class="single added">&nbsp;</li>');
                        spaces[index] = true;
                    }
                });
            }
        });
    });
</script>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="single">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="double">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="single">
    <li class="single">&nbsp;</li>
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="single">&nbsp;</li>
</ul>

<ul class="double">
    <li class="double">&nbsp;</li>
</ul>