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

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JavaScript开发一个简单的瀑布流效果

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

闲着没事,自己写了个瀑布流,我个人写脚本或者是网页的习惯是:只参考别人的效果,很少参考别人的代码,有时侯我宁愿用审查元素来推断代码,也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间,但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘),因为是我实现的。下面说正题:

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

. 代码如下:

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

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> <p class='pic'>"+word+"</p><p class='content'>梦里过客笑眼望,望回廊,秋螽藏</p></li>";
pic.append(li);
}
}
});
});

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

闲着没事,自己写了个瀑布流,我个人写脚本或者是网页的习惯是:只参考别人的效果,很少参考别人的代码,有时侯我宁愿用审查元素来推断代码,也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间,但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘),因为是我实现的。下面说正题:

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

. 代码如下:

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

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> <p class='pic'>"+word+"</p><p class='content'>梦里过客笑眼望,望回廊,秋螽藏</p></li>";
pic.append(li);
}
}
});
});

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

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JavaScript开发一个简单的瀑布流效果

全部内容,希望文章能够帮你解决

js实例教程-JavaScript开发一个简单的瀑布流效果

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过