js瀑布流的写法
1个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Metro风兼搭瀑布流</title>
<style>
body{background:#000;}
.myMetro{position:relative;overflow:hidden;zoom:1;margin:0 auto;}
.MBox{float:left;}
.widgetBox{position:relative;overflow:hidden;width:180px;height:160px;}
.innerBox a{display:block;width:100%;height:100%;outline:none;text-decoration: none;}
</style>
<script>
/* 格子排序 */
var metro = {};
metro.init=function(wrap){
metro.gen={w:190,h:170};
metro.wrap = wrap;
metro.sizeArray= []; //格子,[1,2]就表示1X2的大格子
metro.preset();
metro.putData(wrap);
};
metro.preset = function(){
metro.nameSpace= {};
metro.maxY = -1;
metro.basePos = {x:0, y:0};
metro.memory = {flag:Infinity, x: Infinity, y:Infinity};
metro.row = document.documentElement.offsetWidth / metro.gen.w >> 0;
metro.wrap.style.width = metro.row * metro.gen.w + "px";
};
metro.resort=function(){
metro.preset();
metro.mbox = $class("MBox");
metro.sort(metro.sizeArray);
};
metro.putData = function(list){
(function setBig(){ //大格子初始化设置
var bigBox = $class("bigBox",list);
<html>
<head>
<meta charset="UTF-8" />
<title>Metro风兼搭瀑布流</title>
<style>
body{background:#000;}
.myMetro{position:relative;overflow:hidden;zoom:1;margin:0 auto;}
.MBox{float:left;}
.widgetBox{position:relative;overflow:hidden;width:180px;height:160px;}
.innerBox a{display:block;width:100%;height:100%;outline:none;text-decoration: none;}
</style>
<script>
/* 格子排序 */
var metro = {};
metro.init=function(wrap){
metro.gen={w:190,h:170};
metro.wrap = wrap;
metro.sizeArray= []; //格子,[1,2]就表示1X2的大格子
metro.preset();
metro.putData(wrap);
};
metro.preset = function(){
metro.nameSpace= {};
metro.maxY = -1;
metro.basePos = {x:0, y:0};
metro.memory = {flag:Infinity, x: Infinity, y:Infinity};
metro.row = document.documentElement.offsetWidth / metro.gen.w >> 0;
metro.wrap.style.width = metro.row * metro.gen.w + "px";
};
metro.resort=function(){
metro.preset();
metro.mbox = $class("MBox");
metro.sort(metro.sizeArray);
};
metro.putData = function(list){
(function setBig(){ //大格子初始化设置
var bigBox = $class("bigBox",list);
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询