Question

我有一个流体网格（高度和宽度）。 LI总是矩形的，并根据屏幕尺寸自适应。

现在我需要填写清单，所以它们都有相同的高度。如果所有列都具有一个LI元素，则这将很容易。但是有双倍大小的列，其中一些可以包含大尺寸的LI。在某些情况下，在列的中间甚至有空的空间，因为有一个很大的Li，一个小的，然后再一个大的。

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

在每种情况下，li都向左浮动。我已经制作了一些图片来解释这个问题：

grid problem grid problem2

首先，我想计算孩子的数量并进行比较。但是当所有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
    }
})

现在我知道有多少李需要填充空白空间，它很容易填满它们。但我怎么知道李的中间是否有空的空间？你会如何处理单列的特殊情况？

Answer 1

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

我的方法的要点如下：

单列ul非常简单。迭代所有的ul，看看最大高度是多少。将maxHeight除以li高度并添加li以根据需要填写。

双倍宽度有点棘手。我创建了一个简单的数组来表示构成双宽列的单个空格。然后，我逐步浏览每个li并在适当的位置更新空间索引的状态。如果在需要单个的情况下出现double，那么我添加一个新的li。在针对double ul的li数组结束之后，我再次检查了space数组，以确保在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>

Answer 2

您是否尝试过使用960.gs之类的CSS框架？它更容易，代码将更加语义。此外，使用JavaScript进行布局是一个非常糟糕的主意。什么时候执行JS代码？如果它被添加到最后，那么页面看起来是扭曲的，直到它加载并且如果你在开头加载它，那么它将不起作用，因为元素尚未加载。

Answer 3

我很确定你做不到。这是浮动的问题。从技术上讲，您正在从文档流中获取元素。你唯一能做的就是弄清楚每个尺寸在绘制之前有多少个，计算出它们要绘制的位置，然后在那里添加空的那些可能是差距。

然而，为了实现这一点，你将不得不制定一个出现间隙的模式，并且请放心，它在所有浏览器中都不一样！

一种方法是将所有li组合成四个块，这样如果有四个li，你可以创建一个新的ul，然后将四个附加到它上面。如果它是一个大李，保持就是这样。例如：

<ul> <li class="large"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="large"></li> <li class="large"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </ul>

如果你理解我的意思！

填充列表元素中的空格

3 个答案: