Question

我正在尝试从动态内容创建幻灯片。基本上我要做的就是让我说<ul>是300x100。我浮动列表项，当列表项超过<ul>的高度时。我想将这些列表项包装在div中，这样我就可以将x个列表项除以高度。

我正在尝试这样的事情，但我不知道我是朝着正确的方向前进，也不知道从哪里开始。

CSS：

<style>
    ul {
        height: 100px;
        width: 300px;
    }

    ul li {
        float: left;
    }
</style

HTML：

    <ul>
        <li>first</li>
        <li>ffgggfs</li>
        <li>sffsfsf</li>
        <li>jgjghjgfj</li>
        <li>trtretert</li>
        <li>ghhfhfhgf</li>
        <li>sdfsdfsdf</li>
        <li>fghjjh</li>
        <li>iuyuiy</li>
        <li>cvcvc</li>
        <li>hgjhjg</li>
        <li>tryryre</li>
        <li>kkhjkhjk</li>
        <li>sdfsdfsdf</li>
        <li>khjkhjk</li>
        <li>adfsfafsaf</li>
        <li>syuuyuyu</li>
        <li>sweeerre</li>
        <li>last</li>
    </ul>

jQuery的：

<script>
var sumHeight = 0;


$('ul li').filter(function() {

    var $this = $(this),
        pHeight = $this.parent().height();      // parent inner height

    sumHeight += $this.outerHeight(true);       // + block outer height

    return sumHeight < pHeight;
}).insertAfter('ul').wrapAll('<div></div>');

Answer 1

好的，我没有准确地告诉你你的要求，但可以根据你的需要进行修改。

在这个FIDDLE中我使用div而不是ul / li，我认为它们可以用你想要的任何方式设置。

有一个持有者div，每个div都添加了持有者。通过更改maxheight，您可以控制进入每个“幻灯片”的行数。

var maxheight = 100;
var divlistnum = 0;

$('.holder').append("<div class='" + "slidelist" + divlistnum + "'></div>");

$('#clickme').click(function(){
    $(".slidelist" + divlistnum ).append("<div class='littlelist'>Stuff to Add</div>");

    if( $(".slidelist" + divlistnum).height() > maxheight )
      {
       divlistnum = divlistnum + 1;
       $('.holder').append("<div class='" + "slidelist" + divlistnum + "'></div>");  
       }
});

当列表项超过UL高度时，按高度划分列表项

1 个答案: