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

时间：2016-05-09 18:43:42 阅读：323 评论：0 收藏：0 [点我收藏+]

标签：

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

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

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

技术分享

代码在这里：

[html] view plain copy

print ?

<html>
<head>
<title>win8九宫格随机布局</title>
<style>
#bd_toptab {
width: 980px;
margin: 0 auto;
height: 256px;
position: relative;
}
#bd_toptab .tabwrap {
height: 234px;
overflow: hidden;
position: relative;
width: 980px;
}
#bd_toptab .refresh {
cursor: pointer;
height: 38px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 37px;
background-color: green;
}
#bd_toptab .tabblock {
background: #fff;
height: 234px;
overflow: hidden;
position: absolute;
width: 980px;
}
#bd_hot {
position: relative;
width: 980px;
}
#bd_hotimg .refresh:hover, #bd_hot .refresh:hover {
background-position: -40px -200px;
}
#bd_hot .hot_wrap {
height: 234px;
position: relative;
}
#bd_hot .box {
background: #ccc;
color: #fff;
overflow: hidden;
position: absolute;
text-align: center;
}
#bd_hot .box img {
height: 100%;
width: 100%;
}
#bd_hot .box a {
color: #fff;
display: block;
height: 100%;
text-decoration: none;
overflow: hidden;
width: 100%;
}
#bd_hot .box .main_title {
cursor: pointer;
display: inline-block;
font-family: ‘Microsoft Yahei‘;
padding: 0 10px;
}
#bd_hot .box .sub_title {
color: #ccc;
}
#bd_hot .box div {
background: rgba(0,0,0,.8);
bottom: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000) \9 height:100%;
left: 0;
position: absolute;
width: 100%;
height: 0;
}
#bd_hot .box div p {
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
padding: 0 8px;
}
#bd_hot .box p strong {
display: block;
padding-bottom: 5px;
}
#bd_hot .box .tp_11 {
font-size: 16px;
}
#bd_hot .box .tp_12 {
font-size: 18px;
}
#bd_hot .box .tp_21 {
font-size: 18px;
}
#bd_hot .box .tp_22 {
font-size: 22px;
}
</style>
</head>
<body>
<div id="bd_toptab">
<div class="refresh">点击刷新</div>
<div class="tabblock" id="tabblock"></div>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
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] }]];
var colors = ["#6e89a0", "#3e6181", "#f19b83", "#f3ab97", "#6696c1"];
var data = [
{
"id": "12281",
"title": "传刘德华加盟好声音",
"ltitle": "传刘德华加盟好声音收3千万顶替哈林",
"url": "",
"img": "http://p1.qhimg.com/dr/93_93_/t01626c454c447b2ec9.jpg?size=550x252"
},
{
"id": "11886",
"title": "麻花春晚小品再被毙",
"ltitle": "开心麻花小品被毙李敏镐现身春晚彩排现场",
"url": "#",
"img": ""
},
{
"id": "12275",
"title": "邓紫棋身价飙升25倍",
"ltitle": "《我是歌手2》邓紫棋连夺两冠身价飙升25倍",
"url": "",
"img": "http://p3.qhimg.com/dr/93_93_/t018e3d49ab6025f006.jpg?size=550x380"
},
{
"id": "12211",
"title": "李娜表态不上春晚",
"ltitle": "李娜表态坚决不会上春晚:冯小刚call我就关机",
"url": "",
"img": ""
},
{
"id": "12276",
"title": "第56届格莱美颁奖礼",
"ltitle": "第56届格莱美颁奖礼落幕电音入室显革新",
"url": "",
"img": "http://p4.qhimg.com/dr/93_93_/t01f028185fe6b09e79.jpg?size=600x374"
},
{
"id": "12264",
"title": "男子误点下跪求上车",
"ltitle": "男子乘火车误点向车站人员下跪求上车",
"url": "",
"img": ""
},
{
"id": "12263",
"title": "新华网发玉兔日记",
"ltitle": "新华网发“玉兔”日记：可能熬不过这个月夜了",
"url": "",
"img": ""
},
{
"id": "12119",
"title": "杀医案被告获死刑",
"ltitle": "温岭杀医案被告人获死刑被认定有完全刑事责任能力",
"url": "",
"img": "http://p4.qhimg.com/dr/93_93_/t0147aa8f01295c6a20.jpg?size=400x264"
},
{
"id": "12268",
"title": "瑞典世界最古老树木",
"ltitle": "瑞典发现世界最古老树木：活了9500岁仍在生长",
"url": "",
"img": "http://p6.qhimg.com/dr/93_93_/t016c4c90a96bf75756.jpg?size=950x635"
},
{
"id": "11074",
"title": "中国失独家庭超百万",
"ltitle": "中国失独家庭已超百万每年约增长7.6万个",
"url": "",
"img": ""
},
{
"id": "12273",
"title": "巴西民众抵制世界杯",
"ltitle": "再现打砸抢！巴西上千民众抵制世界杯",
"url": "",
"img": "http://p0.qhimg.com/dr/93_93_/t01f07017f6636f0ca4.jpg?size=845x566"
},
{
"id": "12269",
"title": "罗德曼因送大礼被查",
"ltitle": "罗德曼送金正恩夫妇奢华大礼遭调查超1万美元",
"url": "",
"img": "http://p7.qhimg.com/dr/93_93_/t01f9191af27087271b.jpg?size=550x309"
},
{
"id": "12262",
"title": "高富帅卖保时捷被埋",
"ltitle": "高富帅网卖300万保时捷被神秘买家电击后活埋",
"url": "",
"img": ""
},
{
"id": "12266",
"title": "斯诺登称将不再泄密",
"ltitle": "斯诺登：不会也没有能力继续泄密",
"url": "",
"img": "http://p4.qhimg.com/dr/93_93_/t0110ee3195d656a495.jpg?size=460x276"
},
{
"id": "12261",
"title": "深圳车牌拍卖新高",
"ltitle": "深圳车牌靓号拍卖新高:粤B8888R拍出172万",
"url": "",
"img": "http://p1.qhimg.com/dr/93_93_/t012bf84b38ad056a4f.jpg?size=550x372"
},
{
"id": "12260",
"title": "员工创业可停薪留职",
"ltitle": "江西规定国企员工创业可停薪留职三年惹争议",
"url": "",
"img": ""
},
{
"id": "12005",
"title": "H7N9不排除人传人",
"ltitle": "卫计委：H7N9不排除有限的非持续人传人",
"url": "",
"img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"
},
{
"id": "12259",
"title": "多省医保收不抵支",
"ltitle": "人社部：多省医保当期收不抵支",
"url": "",
"img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"
},
{
"id": "12005",
"title": "H7N9不排除人传人",
"ltitle": "卫计委：H7N9不排除有限的非持续人传人",
"url": "",
"img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"
},
{
"id": "12259",
"title": "多省医保收不抵支",
"ltitle": "人社部：多省医保当期收不抵支",
"url": "",
"img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"
}
];
$("#bd_toptab .refresh").click(function () {
$("#tabblock").empty();
tpl.sort(function () { return 0.5 - Math.random() });
data.sort(function () { return 0.5 - Math.random() });
var html = ‘<div id="bd_hot">‘, count = 0, l = t = w = h = 0, s = 4;
for (var i = 0; i < 4; i++) {
for (var k = 0; k < tpl[i].length; k++) {
if (count >= data.length) {
break;
}
var item = tpl[i][k];
w = item.size[0] == 1 ? 119 : 242;
h = item.size[1] == 1 ? 75 : 154;
l = item.pos[0] == 0 ? 246 * i : 246 * i + 123;
if (item.pos[1] == 0) {
t = 0;
} else if (item.pos[1] == 1) {
t = 79;
} else {
t = 158;
}
item = data[count];
html += ‘<div class="box" style="width:‘ + 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">‘;
if (item.img) {
html += ‘<img src="‘ + item.img + ‘" />‘;
}
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>‘;
count++;
}
}
html += ‘</div>‘;
$("#tabblock").html(html);
$(‘#tabblock .box‘).each(function () {
var _this = $(this), _title = _this.find(‘.main_title‘), _p = _this.find(‘p‘), h = _this.height();
_title.css(‘padding-top‘, (h - _title.height()) / 2 + ‘px‘);
_p.css(‘padding-top‘, (h - _p.height()) / 2 + ‘px‘);
_this.hover(function () {
_this.find(‘div‘).animate({ height: ‘100%‘ }, 300);
}, function () {
_this.find(‘div‘).animate({ height: ‘0‘ }, 300);
});
});
}).click();
</script>
</body>
</html>

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

标签：

原文地址：http://www.cnblogs.com/susanws/p/5474850.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行