3

我想创建一个包含可变数量的 LI 元素的 UL 列表。我希望容器的高度最大为 500 像素。这意味着如果我有更多超过 500px 高度的 li 元素，我希望它变成 2 列。如果有更多，那么可以容纳 2 列，我希望它变成 3 列。我有足够的空间来修复最多 5 列，并且数据永远不会超过这个数量。

知道我该怎么做吗？任何jquery，css技巧？还是我需要处理每个场景服务器端才能做到这一点。

Example 1

    list entry    list entry 
    list entry    list entry
    list entry    list entry
    list entry    list entry
    list entry    


 Example 2
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry
    list entry    list entry


 Example 3
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry

如果没有一个 UL 就无法实现，那么我对此持开放态度。

谢谢！

4

2 回答 2

3

http://jsfiddle.net/eaewX/1/

如果将每个列表封装在 a <div>、 setting columns、column-width或column-counton 中<div>，它将适当地将列表分成列。

编辑：它在 jsfiddle 中，但我应该澄清一下，您目前需要为这些属性使用浏览器扩展，即-webkit-，、-moz--o-

以供参考：

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol/#columns

于 2012-10-30T15:42:51.513 回答
0

这是一个有效的解决方案

/* set max height of containers */
var maxHt=500;/* may need to adjust based on css*/

var $list=$('#startList')
var $container=$list.parent();

var $li=$list.find('li');

var totHt=0;    
var totItems=$li.length;
$li.each(function( idx){

    var ht=$(this).height();
    if( totHt + ht >= maxHt || idx==totItems-1){
        $('<ul>').append( $(this).prevAll().andSelf() ).appendTo( $container );
        totHt=0;
    }else{
        totHt += ht;
    }  

});

$list.remove()

演示：http: //jsfiddle.net/rzw64/3/

请注意，在 UL 上设置的高度需要比用于计算的最大高度多一点。额外的 CSS 将有助于或可以添加代码以获取父容器的动态高度以设置为maxHt允许

于 2012-10-30T15:09:31.903 回答