瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像美丽说、淘宝网都有使用。
css代码：
/*清除外边距*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, figure, /*结构元素*/
dl, dt, dd, ul, ol, li, /*列表元素*/
fieldset, lengend, button, input, textarea, /*表单元素*/
th, td, /*表格元素*/
pre /*文本格式元素*/ {
margin: 0;
}
/*清除内边距*/
ul, ol, menu {
padding: 0;
}
/*重置列表元素*/
ul, ol {
list-style: none;
}
/*将字体扶正*/
address, cite, dfn, em, var {
font-style: normal;
}
/*清下划线*/
a {
text-decoration: none;
color: black;
}
/*鼠标略过a标签，显示下划线*/
a:hover {
/*text-decoration: underline;*/
}
/*清浮动*/
.clear:after {
content: '';
display: block;
clear: both;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
#flow{
width: 1100px;
margin: 0 auto;
}
ul{
float: left;
width: 250px;
margin: 0 5px;
}
li{
margin-top: 5px;
width: 250px;
}
</style>
<script type="text/javascript">
//工具函数
//随机数
function randFn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
//获取浏览器可视区域的高度
function clientHeight(){
return window.innerHeight || document.documentElement.clientHeight;
}
//获取已经卷起来的高度
function scrollHeight(){
return document.body.scrollTop || document.documentElement.scrollTop;
}
//当页面加载完毕时，触发加载图片的方法
window.onload=function(){
createImg(30);
}
//当页面滚动时，判断用户有没有浏览完毕（页面滚动到底部不？）
window.onscroll=function(){
//获取用户已经阅读的高度
var height=clientHeight()+scrollHeight();
//判断用户已经阅读的高度是否大于等于文档总高
if(height>=document.body.offsetHeight){
createImg(20);
}
}
//定义创建并拼接图片的函数
function createImg(n){
//获取所有的ul标签
var uls=document.querySelectorAll('ul');
for(var i=0;i<n;i++){
//定义变量保存高度最小的ul
var minHeight=uls[0];
//创建盛放图片的li
var li=document.createElement('li');
//创建图片标签
var img=document.createElement('img');
//给img标签设置图片
var h=randFn(300,800);
img.src='https://unsplash.it/250/' + h + '/?random';
img.style.width='250px';
img.style.height=h+'px';
//把图片拼接进li中
li.appendChild(img);
//获取到最短一列的ul
for(var j=0;j<uls.length;j++){
if(minHeight.offsetHeight>uls[j].offsetHeight){
minHeight=uls[j];
}
}
//把li拼接进最短一列中
minHeight.appendChild(li);
}
}
</script>
</head>
<body>
<div id="flow" class="clear">
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul>
<ul id="ul4"></ul>
</div>
</body>
</html>
网友评论