无为清净楼资源网 Design By www.qnjia.com
闲着没事,自己写了个瀑布流,我个人写脚本或者是网页的习惯是:只参考别人的效果,很少参考别人的代码,有时侯我宁愿用审查元素来推断代码,也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间,但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘),因为是我实现的。下面说正题:
瀑布流的主体即为几个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);
}
}
});
});
这样做基本实现了最简单的一个瀑布流,但是脚本中并没有考虑内存消耗,即无限加载的问题。现在我也没搞懂,以后再完善吧 。
来看效果:
瀑布流的主体即为几个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);
}
}
});
});
这样做基本实现了最简单的一个瀑布流,但是脚本中并没有考虑内存消耗,即无限加载的问题。现在我也没搞懂,以后再完善吧 。
来看效果:
标签:
瀑布流
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月30日
2024年09月30日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】