80行js代码实现本地瀑布流加载

来源：互联网发布：大华7016软件编辑：程序博客网时间：2024/05/01 05:27

最近学校放假了，想起了大一时自己的一个小小的梦想就是能够自己做一个专属于大学生的网站虽然每个假期都在努力的去上百度去学习如何制作但是没办法，制作一个网站需要的东西太多了；HTML,CSS,javascript等等。无奈自己上网上自己自学的时候感觉太不系统了，又没有专业的人士来带带我，感觉学习的时候好无力啊！！！前几天加了一个WEB群学习了一下本地瀑布流加载，一块学习的小朋友一块学习下吧！！！
(1)首先你需要先准备12张图片
(2)准备Notepad++
(3)Chrome浏览器
(4)建立一个文件夹内有images文件夹这个文件夹总有一些图片
：建立一个HTML文件其中代码如下
<!doctype html>
<html>
<head>
<title>noe</title>
<meta charset = "utf-8">
<meta name = "keywords" content = "">
<meta name = "description" content = "">
<style type = "text/css">
body{
background-color:rgb(233,233,233);//背景设置为淡灰色
}
#wrap{
height:200px;
width:75%;
margin:30px auto;//wrap箱子上边距离顶边30px,居中
}
#wrap ul li{
list-style:none;//消除无序列表前面的那个黑点
width:200px;
margin:5px;
margin-top:10px;
padding:5px;
float:left;
background-color:white;
box-shadow:3px 3px 5px rgb(200,200,200);//前两个代表阴影朝不同方向的宽度，第三个参数表示模糊度，最后一个代表颜色
}
#img{
width:200px;
transition:1s;//设置的动画转换时间间隔
}
</style>
</head>
<body>
<div id = "wrap">
<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>
</div>

</body>
<script src = "juuery-1.12.0.min.js"></script>
<script>
var MImgs = [

{src:"images/1.png"},

{src:"images/2.jpg"},

{src:"images/3.jpg"},

{src:"images/4.jpg"},

{src:"images/5.jpg"},

{src:"images/6.jpg"},

{src:"images/7.jpg"},

{src:"images/8.jpg"},

{src:"images/9.jpg"},

{src:"images/10.jpg"},

{src:"images/11.jpg"},

{src:"images/12.jpg"},
];//建立一个数组用于储存本地的十二张图片
function CreateImg(){
var oDiv = document.createElement('div');//建立一个新的DIV对象
var oImg = new Image();//创建一个新的图像对象
oImg.src = MImgs[i%MImgs.length].src;//为新建的图像对象添加图像链接
oImg.style.cssText = "transform:scale(0)";//起初先进行图片的缩放
GetList($('#wrap ul li')).append(oDiv);//使用GetList()函数获得最短的Li
setTimeout(function(){
oImg.style.cssText = 'tansform:scale(1)';
},100);//延时100毫秒之后图片恢复原状
//先实现了图片的放大一个动态的效果
}
function GetList(obj){
var length = obj.length;
var h = Infinity;
var GetLists;
var i = 0;
for(i = 0;i<length;i++){
if(obj.eq(i).height()<h)
{
h = obj.eq(i).length();
GetLists = obj.eq(i);
}
}
return GetLists;
}
//定义全局变量用于本地图片的筛选
var i = 0,sum = '';
function onload(){
if(i<12)//打开网页后首先加载12张图片
{
for(;i<12;i++)
{
CreatImg();
}
}else
{
sum = i;
for(;i<sum+4;i++)
{
CreatImg();
}
}
i++;
}

//首先执行的函数
onload();
//检测滚动条实现动态加载
var ScrollH = '';
var ScrollT = '';
var _height = $(window).height();
$(window).scroll(function(){
ScrollH = document.body.scrollHeight;
ScrollT = document.body.scrollTop;
if(_height+ScrollT+50>ScrollH)
{
onload();
}
});
</script>

</html>

0 0