コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
javascript - css或者jQuery实现 ol li中竖向排序，横向滚动
PHPz
PHPz 2017-04-10 12:47:00
0
2
798

假如有

<ol>
    <li>.....</li><li>.....</li><li>.....</li><li>.....</li><li>.....</li>
    <li>.....</li><li>.....</li><li>.....</li>..........
</ol>

我想实现固定高度，第一列是前面五个序号是1,2,3,4，5。然后超过高度后到第二列排序第二列的序号是6,7,8,9,10以此类推。用ul li： float left实现的是横向排序，明白我的意思吗？

PHPz
PHPz

学习是最好的投资！

全員に返信(2)
数据分析师
数据分析师2017-10-01 01:18:00 2棟

javascript - ol li で垂直ソートと水平スクロールを実装するための css または jQuery - PHP 中国語 Web サイト Q&A - javascript - ol li で垂直ソートと水平スクロールを実装するための css または jQuery - PHP 中国語 Web サイト Q&A

見て回って学習してください。

いいねを押す +0
返信を追加
迷茫
迷茫2017-04-10 12:49:00 1棟 
<html>
<head>
    <title>Bootstrap</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        body,p{margin: 0;padding: 0;}
        #list_item{overflow-x: scroll;overflow-y: hidden;width: 500px;}
        .list_inner{height: 170px;}
        .list{height: 150px;float: left;position: relative;}
    </style>
</head>
<body>
<p id="list_item">
    <p class="list_inner">
        <ol class="list">
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
            <li>周末再看吧</li>
        </ol>
    </p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var i_height = $('.list li:first').height();
        var i_width = $('.list li:first').width()+60;
        var o_height = $('.list').height();
        var len = $('.list li').length;
        var br = parseInt(o_height/i_height);
        $('.list_inner,.list').css('width',(parseInt(len/br)+1)*i_width+'px');
        for(var i = 0; i<len/br;i++){
            var dom = (i!=parseInt(len/br)?$('.list li').slice((i+1)*br,(i+2)*br+1):$('.list li:gt('+(i+1)*br+')'));
            $.each(dom,function(j,item){
                $(item).css({'position':'absolute','left':(i+1)*i_width+40+'px','top':j*i_height+'px'});
            });
        }
    })
</script>
</p>
</body>

就这样吧 虽然觉得不太简洁

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート