两种方式实现瀑布流
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两种方式实现瀑布流相关的知识，希望对你有一定的参考价值。
一、浮动式瀑布流
实现要点：
1.设定列数，定下框架。
2.在ul中创建新节点li，在li中添加img节点,形成整体结构。
3.写最短列函数，每次创建的img保证在最小列下追加。
4.写滚动事件，在拖到最下方能自动加载
浮动式定位代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
margin: 20px auto;
width: 330px;
font-size: 26px;
color: purple;
}
#box{
margin: 0 auto;
width:1000px;
}
#box ul{
/*ul浮动*/
float: left;
}
#box ul li{
list-style: none;
}
#box ul li img{
width: 180px;
padding: 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//抓元素
var box=document.getElementById(‘box‘);
var uls=box.getElementsByTagName(‘ul‘);
var vh=document.documentElement.clientHeight;
//创建节点函数
crElement();
function crElement(){
for(var i=1; i<=25;i++){
var new_img=document.createElement(‘img‘);
var new_li=document.createElement(‘li‘);
new_img.src=‘images/‘+i+‘.jpg‘;
new_li.appendChild(new_img);
var index=shortest(uls);
uls[index].appendChild(new_li);
}
}
//最小ul函数
function shortest(uls){
var height=uls[0].offsetHeight;
var index=0;
for(var i=0;i<uls.length;i++){
var new_height=uls[i].offsetHeight;
if(new_height<height){
height=new_height;
index=i;
}
}
return index;
}
//滚动事件
window.onscroll=function(){
var st=document.documentElement.scrollTop || document.body.scrollTop;
if(st+vh>=document.body.scrollHeight){
crElement();
}
}
}
</script>
</head>
<body>
<p>~~~~浮动瀑布流~~~~</p>
<div id="box">
<!--五列-->
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
二、定位式瀑布流
实现要点：
1.根据定下的每个div块的宽度，浏览器宽度，计算可容纳div列数
2.创建新节点div，在div中使用appendChild添加img节点,形成整体结构。
3.初始化高度数组，写最短高度函数，每次创建的img保证在最短列下追加。
4.写滚动事件，拖到最下方能自动加载
定位式瀑布流代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位瀑布流</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
body{
background: cadetblue;
}
p{
margin: 20px auto;
width: 330px;
font-size: 26px;
color: purple;
}
#box{
margin: 0 auto;
position: relative;
}
#box div img{
width: 230px;
margin: 0px 8px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//抓元素
var box=document.getElementById(‘box‘);
//获得浏览器宽高
var vh=document.documentElement.clientHeight;
var vw=document.documentElement.clientWidth;
//计算最多可容纳div数
var default_width=230+16;
var div_num=Math.floor(vw/default_width);
//获得空间设置居中
box.style.width=default_width*div_num+‘px‘;
// 初始化一个高度数组
var arr_height=[0,0,0,0,0];
crElement();
//循环创建元素
function crElement(){
for(var i=1;i<=25;i++){
var new_img=document.createElement(‘img‘);
var new_div=document.createElement(‘div‘);
new_img.src=‘images/‘+i+‘.jpg‘;
new_div.appendChild(new_img);
new_div.style.position=‘absolute‘;
var min_index=shortest(arr_height);
new_div.style.left=min_index*default_width+‘px‘;
new_div.style.top=arr_height[min_index]+‘px‘;
//
box.appendChild(new_div);
arr_height[min_index]+=new_div.offsetHeight+8;
}
}
//获得最小的列
function shortest(arr_height){
var height=arr_height[0];
var index=0;
for(var i=0;i<arr_height.length;i++){
if(arr_height[i]<height){
height=arr_height[i];
index=i;
}
}
return index;
}
//滚动加载
window.onscroll=function(){
//内容高度=滚动高度+浏览器高度
var st=document.documentElement.scrollTop;
if(vh+st>=document.body.scrollHeight){
crElement();
}
}
}
</script>
</head>
<body>
<p>~~~~定位瀑布流~~~~</p>
<div id="box">
</div>
</body>
</html>
以上是关于两种方式实现瀑布流的主要内容，如果未能解决你的问题，请参考以下文章