发布于 2017-07-19 12:04:25 | 151 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

---

瀑布流的主体即为 几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下，具体实现如下，感兴趣的朋友可以参考下哈
闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚（当然肯定后来会忘），因为是我实现的。下面说正题：

瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。
主体形式如下：

 
<div id="main"> 
　　<ul class="pics"> 
　　　　<li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 
　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> 
　　　　... 
　　</ul> 
　　<ul class="pics"> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 
　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> 
　　　　... 
　　</ul> 
　　.... 
</div> 

css定义如下：

 
.pics { 
　　　　 float:left; 
　　　　 list-style:none; 
　　　　 margin-left:10px; 
　　　　 margin-right:10px; 
　　　　 width:230px; 
} 
.pics li { 
　　　　 display:block; 
　　　　 width:100%; 
　　　　 margin:0 auto; 
　　　　 margin-bottom:10px; 
　　　　 position:relative; 
　　　　 background-color:#FFF; 
　　　　 box-shadow: 0 1px 2px 0; 
　　　　 padding-top:10px; 
} 
.pic { 
　　　　 width:92%; margin:0 auto; 
　　　　 padding-top:10px; 
　　　　 text-align:center; 
　　　　 font-size:180px; 
　　　　 background-color:#0CF; 
} 
.pic img { 
　　　　 width:100%; 
　　　　 margin:0 auto; 
} 
.content { 
　　　　 width:92%; 
　　　　 margin:0 auto; 
　　　　 padding-top:10px; 
　　　　 height:50px; 
　　　　 text-overflow:ellipsis; 
　　　　 white-space:nowrap; 
　　　　 overflow:hidden; 
} 

脚本实现如下：

 
$(function(){ 
//alert($(window).height()); 浏览器当前窗口可视区域高度 
//alert($(document).height()); 
//浏览器当前窗口文档的高度 alert($(document.body).height()); 
//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true)); 
//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); 
//浏览器当前窗口可视区域宽度 alert($(document).width()); 
//浏览器当前窗口文档对象宽度 alert($(document.body).width()); 
//浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true)); 
//浏览器当前窗口文档body的总宽度 包括border padding margin 
$(document).scroll(function(){ 
var pics=$(".pics"); 
var sc=$(document).scrollTop(); 
$("#float").text(sc); 
for(var i=0;i<pics.length;i++){ 
var pic=pics.eq(i); 
var bottom =pic.offset().top+pic.height(); 
if((sc+$(window).height())>=bottom){ 
eval( "var word=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"'); 
var li="<li> <div class='pic'>"+word+"</div><div class='content'>梦里过客笑眼望，望回廊，秋螽藏</div></li>"; 
pic.append(li); 
} 
} 
}); 
}); 

这样做基本实现了最简单的一个瀑布流，但是脚本中并没有考虑内存消耗，即无限加载的问题。现在我也没搞懂，以后再完善吧 。
来看效果：