Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            html,
            body,
            ul,
            li,
            p,
            h1 {
                margin: 0;
                padding: 0;
            }
            
            body {
                margin-top: 10px;
                min-width:1000px;
            }
            
            #wrp .datamore {
                position: relative;
                margin: 0 auto;
            }
            
            li {
                list-style: none;
                margin-right:10px;
                margin-bottom:10px;
            }
            
            #wrp .datamore>li {
                width: 260px;
                border: 1px solid #ccc;
                padding: 10px;
                line-height: 0;
                position: absolute;
            }
            
            #wrp .datamore>li img {
                width: 260px;
                display: block;
            }
            
            #wrp .datamore>li h1 {
                line-height: 30px;
                font-size: 14px;
                border-bottom: 1px solid #ccc;
            }
            
            #wrp .datamore>li p {
                font-size: 12px;
                line-height: 20px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
​
    <body>
        <div id="wrp">
            <ul class="datamore">
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
                    <h1>草间弥生“花痴屋”亮相</h1>
                    <p>在维多利亚国家美术馆三年展的展厅中， 观众蜂拥而至，试图一睹大师的幻觉.</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1>日本洞穴巧借光影玩浪漫</h1>
                    <p>日本千叶县有个神奇的洞穴，它会巧借光影玩浪漫，每年为人们奉上两次惊艳的表演。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1>美公司成功试飞轨道飞行器</h1>
                    <p>当地时间4月29日，美国得克萨斯州范霍恩附近，美国蓝色起源公司再次成功试飞并回收升级版“新谢泼德”亚轨道飞行器。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1>南极洲企鹅发现被偷拍</h1>
                    <p>来自新西兰的电影制作人Anthony Powell已经连续10年在南极洲记录企鹅的生活特性，希望揭开这群可爱的极地动物神秘的面纱。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>草间弥生“花痴屋”亮相</h1>
                    <p>在维多利亚国家美术馆三年展的展厅中， 观众蜂拥而至，试图一睹大师的幻觉.</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
                    <h1>草间弥生“花痴屋”亮相</h1>
                    <p>在维多利亚国家美术馆三年展的展厅中， 观众蜂拥而至，试图一睹大师的幻觉.</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1>日本洞穴巧借光影玩浪漫</h1>
                    <p>日本千叶县有个神奇的洞穴，它会巧借光影玩浪漫，每年为人们奉上两次惊艳的表演。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1>美公司成功试飞轨道飞行器</h1>
                    <p>当地时间4月29日，美国得克萨斯州范霍恩附近，美国蓝色起源公司再次成功试飞并回收升级版“新谢泼德”亚轨道飞行器。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1>南极洲企鹅发现被偷拍</h1>
                    <p>来自新西兰的电影制作人Anthony Powell已经连续10年在南极洲记录企鹅的生活特性，希望揭开这群可爱的极地动物神秘的面纱。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>草间弥生“花痴屋”亮相</h1>
                    <p>在维多利亚国家美术馆三年展的展厅中， 观众蜂拥而至，试图一睹大师的幻觉.</p>
                </li>
            </ul>
            <div class="ficer">我是看不见的</div>
        </div>
        <script type="text/javascript">
            var owrap = $('#wrp');
            var datamore = $('.datamore');
            var oli = owrap.find('li');
            var arr = [];
            var owidth = $(window).width();
            var oliwidh = oli.eq(0).outerWidth(true);
            var len = Math.floor((owidth / oliwidh));
            var omin;
            var objinx;
            datamore.css({
                'width': oliwidh * len
            })
            for(var i = 0; i < len; i++) {
                arr.push(oli.eq(i).outerHeight(true));
                oli.eq(i).css({
                    'top': 0,
                    'left': i * oliwidh + 'px'
                })
            }
            console.log(arr);
        </script>
    </body>
​
</html>
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers