发布于 2015-05-09 10:55:36 | 230 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
一个简单的图片瀑布流
首先准备一个html文件,css用到很少,所以写在html里,还需要一个js文件及几张图片(分辨率随意)
html的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box_img {
padding: 5px;
float: left;
}
.box_img img {
width: 300px;
height: auto;
}
</style>
<script src="js/test.js">
</script>
</head>
<body>
<div id="container">
<div class="box_img">
<img src="1.jpg">
</div>
<div class="box_img">
<img src="2.jpg">
</div>
<div class="box_img">
<img src="3.jpg">
</div>
<div class="box_img">
<img src="4.jpg">
</div>
<div class="box_img">
<img src="5.jpg">
</div>
<div class="box_img">
<img src="6.jpg">
</div>
<div class="box_img">
<img src="7.jpg">
</div>
<div class="box_img">
<img src="8.jpg">
</div>
<div class="box_img">
<img src="9.jpg">
</div>
<div class="box_img">
<img src="5.jpg">
</div>
<div class="box_img">
<img src="6.jpg">
</div>
<div class="box_img">
<img src="7.jpg">
</div>
<div class="box_img">
<img src="8.jpg">
</div>
<div class="box_img">
<img src="9.jpg">
</div>
</div>
</body>
</html>
可以看出id为container的div包裹了许多class为box_img的div,而这些div中都包含有一张图片, 但是这样仅仅是图片的堆砌,每行图片之间有很大的留白,这时加入js后即可以实现瀑布流的效果
js的代码:
/**
* Created by earthgee on 2015/4/3.
*/
window.onload=function(){
imgLocation("container","box_img");
var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
window.onscroll= function () {
if(checkflag()){
//动态增加图片,实现自动加载
var cparent=document.getElementById("container");
for(var i=0;i<imgData.data.length;i++)
{
var ccontent=document.createElement("div");
ccontent.className="box_img";
cparent.appendChild(ccontent);
var img=document.createElement("img");
img.src=imgData.data[i].src;
ccontent.appendChild(img);
}
imgLocation("container","box_img");
}
}
}
//此函数实现自动加载,通过检查当前页面最后一张图片距离顶端的距离,然后和页面高度及滚动距离作比较
function checkflag()
{
var cparent=document.getElementById("container");
var cconent=getChildElement(cparent,"box_img");
var lastContentHeight=cconent[cconent.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.scrollTop||document.body.scrollTop;
if(lastContentHeight<scrollTop+pageHeight)
{
return true;
}
}
//此函数实现瀑布流
function imgLocation(parent,content) {
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,content); //ccontent为数组
var imgWidth=ccontent[0].offsetWidth; //获得第一张图片的宽度(因为后面要在css中设置每张图片的宽度相同)
var cols=Math.floor(document.documentElement.clientWidth/imgWidth); //一行放多少张图片
cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
var boxHeightArr=[];
for(var i=0;i<ccontent.length;i++)
{
if(i<cols) //boxHeightArr存放第一行图片的宽度
{
boxHeightArr[i]=ccontent[i].offsetHeight;
}
else
{
var minheight=Math.min.apply(null,boxHeightArr);
var minIndex=getminheightLocation(boxHeightArr,minheight); //找到第一行最短图片的索引
ccontent[i].style.position="absolute";
ccontent[i].style.top=minheight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight; //将每一张图片放到当前可以找到的最短图片下面,并增加长度
}
}
}
function getminheightLocation(boxHeightArr,minHeight) {
for(var i in boxHeightArr){
if(boxHeightArr[i]==minHeight){
return i;
}
}
}
//获得parent的所有class为content的子元素,返回一个数组
function getChildElement(parent,content){
var contentArr=new Array();
var allcontent=parent.getElementsByTagName("*"); //匹配所有子元素
for(var i=0;i<allcontent.length;i++)
{
if(allcontent[i].className==content)
{
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
此时就实现了图片瀑布流的效果,可以放在网站里了...