6顶

绝对定位方式的页面瀑布流结构实例展示

稿源：互联网 2018-09-27 02:17:37 点击： 10431 撤稿纠错

现在很流行的页面瀑布流定位方式特效展示...

以下讨论的是和绝对定位瀑布流相关的绝对定位方式的页面瀑布流结构实例展示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html >
<html>
<head>
<title>Wallet Fall</title>
<style>
#container{width:640px;}
#container div{background:#000; width:200px; position:absolute;}
</style>

</head>
<body>
<div id="container">
<div style="height:200px">111111</div>
<div style="height:280px">111111</div>
<div style="height:240px">111111</div>
<div style="height:210px">111111</div>
<div style="height:200px">111111</div>
<div style="height:230px">111111</div>
<div style="height:280px">111111</div>
<div style="height:230px">111111</div>
<div style="height:200px">111111</div>
</div>
<script>
var line = 4,
width = 880,
boxWidth = 200,
marginLeft = 20,
marginTop = 20,
container = document.getElementById('container'),
box = container.getElementsByTagName('div'),
lineArr = [0,0,0,0];

for(var i=0; i<box.length; i++){
//var targetLine = lineArr.indexOf(Math.min(lineArr[0],lineArr[1],lineArr[2])); //数组indexOf IE8以上支持
var minLine = Math.min(lineArr[0],lineArr[1],lineArr[2],lineArr[3]);
var targetLine = 0;
for(var j=0; j<lineArr.length; j++){
if(minLine == lineArr[j]){
targetLine = j;
}
}
box[i].style.top = lineArr[targetLine] + 'px';
box[i].style.left = targetLine * boxWidth + targetLine * marginLeft + 'px';
lineArr[targetLine] += box[i].offsetHeight + marginTop;
}
</script>
</html>

关于绝对定位方式的页面瀑布流结构实例展示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092782506.shtml方便下次再访问哦。

·上一篇： JQuery实现仿sina新浪微博新鲜事滚动特效代码
·下一篇： 鼠标经过图片显示价格或浮动层的js特效代码演示

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

绝对定位方式的页面瀑布流结构实例展示

文章分类LIST >>返回首页

最新游戏

最新新闻