zoukankan      html  css  js  c++  java

  • 仿360新闻的热搜图片，win8风格随机九宫格布局

    360新闻地址：http://sh.qihoo.com/i/

    感觉这效果挺好的，随机九宫格，在不少地方可以用到，就研究了下他的源码，基本原理就是预先定义好几种布局模块，然后根据需要进行拼接，具体代码可以看下面的，复制下运行看效果吧。

    源码打包下载地址：http://download.csdn.net/detail/sweetsuzyhyf/7107063

    代码在这里：

    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <html>  
    2. <head>  
    3.     <title>win8九宫格随机布局</title>  
    4.     <style>  
    5.         #bd_toptab {  
    6.              980px;  
    7.             margin: 0 auto;  
    8.             height: 256px;  
    9.             position: relative;  
    10.         }  
    11.   
    12.             #bd_toptab .tabwrap {  
    13.                 height: 234px;  
    14.                 overflow: hidden;  
    15.                 position: relative;  
    16.                  980px;  
    17.             }  
    18.   
    19.             #bd_toptab .refresh {  
    20.                 cursor: pointer;  
    21.                 height: 38px;  
    22.                 position: absolute;  
    23.                 right: 0;  
    24.                 top: 0;  
    25.                 z-index: 1;  
    26.                  37px;  
    27.                 background-color: green;  
    28.             }  
    29.   
    30.             #bd_toptab .tabblock {  
    31.                 background: #fff;  
    32.                 height: 234px;  
    33.                 overflow: hidden;  
    34.                 position: absolute;  
    35.                  980px;  
    36.             }  
    37.   
    38.         #bd_hot {  
    39.             position: relative;  
    40.              980px;  
    41.         }  
    42.   
    43.             #bd_hotimg .refresh:hover, #bd_hot .refresh:hover {  
    44.                 background-position: -40px -200px;  
    45.             }  
    46.   
    47.             #bd_hot .hot_wrap {  
    48.                 height: 234px;  
    49.                 position: relative;  
    50.             }  
    51.   
    52.             #bd_hot .box {  
    53.                 background: #ccc;  
    54.                 color: #fff;  
    55.                 overflow: hidden;  
    56.                 position: absolute;  
    57.                 text-align: center;  
    58.             }  
    59.   
    60.                 #bd_hot .box img {  
    61.                     height: 100%;  
    62.                      100%;  
    63.                 }  
    64.   
    65.                 #bd_hot .box a {  
    66.                     color: #fff;  
    67.                     display: block;  
    68.                     height: 100%;  
    69.                     text-decoration: none;  
    70.                     overflow: hidden;  
    71.                      100%;  
    72.                 }  
    73.   
    74.                 #bd_hot .box .main_title {  
    75.                     cursor: pointer;  
    76.                     display: inline-block;  
    77.                     font-family: 'Microsoft Yahei';  
    78.                     padding: 0 10px;  
    79.                 }  
    80.   
    81.                 #bd_hot .box .sub_title {  
    82.                     color: #ccc;  
    83.                 }  
    84.   
    85.                 #bd_hot .box div {  
    86.                     background: rgba(0,0,0,.8);  
    87.                     bottom: 0;  
    88.                     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000) 9 height:100%;  
    89.                     left: 0;  
    90.                     position: absolute;  
    91.                      100%;  
    92.                     height: 0;  
    93.                 }  
    94.   
    95.                     #bd_hot .box div p {  
    96.                         cursor: pointer;  
    97.                         font-size: 12px;  
    98.                         font-weight: 400;  
    99.                         line-height: 18px;  
    100.                         text-align: left;  
    101.                         padding: 0 8px;  
    102.                     }  
    103.   
    104.                 #bd_hot .box p strong {  
    105.                     display: block;  
    106.                     padding-bottom: 5px;  
    107.                 }  
    108.   
    109.                 #bd_hot .box .tp_11 {  
    110.                     font-size: 16px;  
    111.                 }  
    112.   
    113.                 #bd_hot .box .tp_12 {  
    114.                     font-size: 18px;  
    115.                 }  
    116.   
    117.                 #bd_hot .box .tp_21 {  
    118.                     font-size: 18px;  
    119.                 }  
    120.   
    121.                 #bd_hot .box .tp_22 {  
    122.                     font-size: 22px;  
    123.                 }  
    124.     </style>  
    125. </head>  
    126. <body>  
    127.     <div id="bd_toptab">  
    128.         <div class="refresh">点击刷新</div>  
    129.         <div class="tabblock" id="tabblock"></div>  
    130.     </div>  
    131.   
    132.     <script src="jquery-1.9.1.min.js"></script>  
    133.     <script>  
    134.         var tpl = [[{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [2, 2], pos: [0, 1] }], [{ size: [2, 2], pos: [0, 0] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 2], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 2], pos: [1, 1] }], [{ size: [1, 2], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 2], pos: [1, 0] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [2, 1], pos: [0, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [2, 1], pos: [0, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [2, 1], pos: [0, 2] }]];  
    135.         var colors = ["#6e89a0", "#3e6181", "#f19b83", "#f3ab97", "#6696c1"];  
    136.         var data = [  
    137.           {  
    138.               "id": "12281",  
    139.               "title": "传刘德华加盟好声音",  
    140.               "ltitle": "传刘德华加盟好声音 收3千万顶替哈林",  
    141.               "url": "",  
    142.               "img": "http://p1.qhimg.com/dr/93_93_/t01626c454c447b2ec9.jpg?size=550x252"  
    143.           },  
    144.           {  
    145.               "id": "11886",  
    146.               "title": "麻花春晚小品再被毙",  
    147.               "ltitle": "开心麻花小品被毙 李敏镐现身春晚彩排现场",  
    148.               "url": "#",  
    149.               "img": ""  
    150.           },  
    151.           {  
    152.               "id": "12275",  
    153.               "title": "邓紫棋身价飙升25倍",  
    154.               "ltitle": "《我是歌手2》邓紫棋连夺两冠身价飙升25倍",  
    155.               "url": "",  
    156.               "img": "http://p3.qhimg.com/dr/93_93_/t018e3d49ab6025f006.jpg?size=550x380"  
    157.           },  
    158.           {  
    159.               "id": "12211",  
    160.               "title": "李娜表态不上春晚",  
    161.               "ltitle": "李娜表态坚决不会上春晚:冯小刚call我就关机",  
    162.               "url": "",  
    163.               "img": ""  
    164.           },  
    165.           {  
    166.               "id": "12276",  
    167.               "title": "第56届格莱美颁奖礼",  
    168.               "ltitle": "第56届格莱美颁奖礼落幕 电音入室显革新",  
    169.               "url": "",  
    170.               "img": "http://p4.qhimg.com/dr/93_93_/t01f028185fe6b09e79.jpg?size=600x374"  
    171.           },  
    172.           {  
    173.               "id": "12264",  
    174.               "title": "男子误点下跪求上车",  
    175.               "ltitle": "男子乘火车误点 向车站人员下跪求上车",  
    176.               "url": "",  
    177.               "img": ""  
    178.           },  
    179.           {  
    180.               "id": "12263",  
    181.               "title": "新华网发玉兔日记",  
    182.               "ltitle": "新华网发“玉兔”日记：可能熬不过这个月夜了",  
    183.               "url": "",  
    184.               "img": ""  
    185.           },  
    186.           {  
    187.               "id": "12119",  
    188.               "title": "杀医案被告获死刑",  
    189.               "ltitle": "温岭杀医案被告人获死刑 被认定有完全刑事责任能力",  
    190.               "url": "",  
    191.               "img": "http://p4.qhimg.com/dr/93_93_/t0147aa8f01295c6a20.jpg?size=400x264"  
    192.           },  
    193.           {  
    194.               "id": "12268",  
    195.               "title": "瑞典世界最古老树木",  
    196.               "ltitle": "瑞典发现世界最古老树木：活了9500岁 仍在生长",  
    197.               "url": "",  
    198.               "img": "http://p6.qhimg.com/dr/93_93_/t016c4c90a96bf75756.jpg?size=950x635"  
    199.           },  
    200.           {  
    201.               "id": "11074",  
    202.               "title": "中国失独家庭超百万",  
    203.               "ltitle": "中国失独家庭已超百万 每年约增长7.6万个",  
    204.               "url": "",  
    205.               "img": ""  
    206.           },  
    207.           {  
    208.               "id": "12273",  
    209.               "title": "巴西民众抵制世界杯",  
    210.               "ltitle": "再现打砸抢！巴西上千民众抵制世界杯",  
    211.               "url": "",  
    212.               "img": "http://p0.qhimg.com/dr/93_93_/t01f07017f6636f0ca4.jpg?size=845x566"  
    213.           },  
    214.           {  
    215.               "id": "12269",  
    216.               "title": "罗德曼因送大礼被查",  
    217.               "ltitle": "罗德曼送金正恩夫妇奢华大礼遭调查 超1万美元",  
    218.               "url": "",  
    219.               "img": "http://p7.qhimg.com/dr/93_93_/t01f9191af27087271b.jpg?size=550x309"  
    220.           },  
    221.           {  
    222.               "id": "12262",  
    223.               "title": "高富帅卖保时捷被埋",  
    224.               "ltitle": "高富帅网卖300万保时捷 被神秘买家电击后活埋",  
    225.               "url": "",  
    226.               "img": ""  
    227.           },  
    228.           {  
    229.               "id": "12266",  
    230.               "title": "斯诺登称将不再泄密",  
    231.               "ltitle": "斯诺登：不会也没有能力继续泄密",  
    232.               "url": "",  
    233.               "img": "http://p4.qhimg.com/dr/93_93_/t0110ee3195d656a495.jpg?size=460x276"  
    234.           },  
    235.           {  
    236.               "id": "12261",  
    237.               "title": "深圳车牌拍卖新高",  
    238.               "ltitle": "深圳车牌靓号拍卖新高:粤B8888R拍出172万",  
    239.               "url": "",  
    240.               "img": "http://p1.qhimg.com/dr/93_93_/t012bf84b38ad056a4f.jpg?size=550x372"  
    241.           },  
    242.           {  
    243.               "id": "12260",  
    244.               "title": "员工创业可停薪留职",  
    245.               "ltitle": "江西规定国企员工创业可停薪留职三年惹争议",  
    246.               "url": "",  
    247.               "img": ""  
    248.           },  
    249.           {  
    250.               "id": "12005",  
    251.               "title": "H7N9不排除人传人",  
    252.               "ltitle": "卫计委：H7N9不排除有限的非持续人传人",  
    253.               "url": "",  
    254.               "img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"  
    255.           },  
    256.           {  
    257.               "id": "12259",  
    258.               "title": "多省医保收不抵支",  
    259.               "ltitle": "人社部：多省医保当期收不抵支",  
    260.               "url": "",  
    261.               "img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"  
    262.           },  
    263.           {  
    264.               "id": "12005",  
    265.               "title": "H7N9不排除人传人",  
    266.               "ltitle": "卫计委：H7N9不排除有限的非持续人传人",  
    267.               "url": "",  
    268.               "img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"  
    269.           },  
    270.           {  
    271.               "id": "12259",  
    272.               "title": "多省医保收不抵支",  
    273.               "ltitle": "人社部：多省医保当期收不抵支",  
    274.               "url": "",  
    275.               "img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"  
    276.           }  
    277.         ];  
    278.   
    279.   
    280.         $("#bd_toptab .refresh").click(function () {  
    281.             $("#tabblock").empty();  
    282.             tpl.sort(function () { return 0.5 - Math.random() });  
    283.   
    284.             data.sort(function () { return 0.5 - Math.random() });  
    285.   
    286.             var html = '<div id="bd_hot">', count = 0, l = t = w = h = 0, s = 4;  
    287.             for (var i = 0; i < 4; i++) {  
    288.   
    289.                 for (var k = 0; k < tpl[i].length; k++) {  
    290.                     if (count >= data.length) {  
    291.                         break;  
    292.                     }  
    293.   
    294.                     var item = tpl[i][k];  
    295.                     w = item.size[0] == 1 ? 119 : 242;  
    296.                     h = item.size[1] == 1 ? 75 : 154;  
    297.                     l = item.pos[0] == 0 ? 246 * i : 246 * i + 123;  
    298.                     if (item.pos[1] == 0) {  
    299.                         t = 0;  
    300.                     } else if (item.pos[1] == 1) {  
    301.                         t = 79;  
    302.                     } else {  
    303.                         t = 158;  
    304.                     }  
    305.   
    306.                     item = data[count];  
    307.                     html += '<div class="box" style="' + w + 'px;height:' + h + 'px;top:' + t + 'px;left:' + l + 'px;background-color:' + colors.sort(function () { return 0.5 - Math.random() })[0] + '"><a href="' + item.url + '" target="_blank" class="img tp_12">';  
    308.                     if (item.img) {  
    309.                         html += '<img src="' + item.img + '" />';  
    310.                     }  
    311.                     html += '<span class="main_title">' + item.title + '</span><div><p><strong>' + item.title + '</strong><span class="sub_title">' + item.ltitle + '</span></p></div></a></div>';  
    312.                     count++;  
    313.                 }  
    314.             }  
    315.             html += '</div>';  
    316.             $("#tabblock").html(html);  
    317.   
    318.             $('#tabblock .box').each(function () {  
    319.                 var _this = $(this), _title = _this.find('.main_title'), _p = _this.find('p'), h = _this.height();  
    320.                 _title.css('padding-top', (h - _title.height()) / 2 + 'px');  
    321.                 _p.css('padding-top', (h - _p.height()) / 2 + 'px');  
    322.   
    323.                 _this.hover(function () {  
    324.                     _this.find('div').animate({ height: '100%' }, 300);  
    325.                 }, function () {  
    326.                     _this.find('div').animate({ height: '0' }, 300);  
    327.                 });  
    328.             });  
    329.         }).click();  
    330.     </script>  
    331. </body>  
    332. </html> 
  • 相关阅读:
    第一个VS2015 Xaramin Android项目(续)
    第一个VS2015 Xaramin Android项目
    Android SDK Manager 无法打开
    VS 2015 Android 环境设置
    Unity 游戏运行越久加载越慢
    一不注意,在Unity3D中DllImport 引起的Bug.
    Animation显示ListView的每一条记录
    ViewFlipper
    BitmapFactory.Options对图片进行缩放
    显示倒计时的Button按钮
  • 原文地址：https://www.cnblogs.com/susanws/p/5474850.html
Copyright © 2011-2022 走看看