一个简单的瀑布流效果(主体形式自写)


Posted in Javascript onMay 27, 2013

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

瀑布流的主体即为几个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); 
} 
} 
}); 
});

这样做基本实现了最简单的一个瀑布流,但是脚本中并没有考虑内存消耗,即无限加载的问题。现在我也没搞懂,以后再完善吧 。
来看效果:
一个简单的瀑布流效果(主体形式自写)
Javascript 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
JS数组的赋值介绍
Mar 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
vue axios整合使用全攻略
May 24 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PDO::_construct讲解
2019/01/27 PHP
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
python 的列表遍历删除实现代码
2020/04/12 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
keras实现多种分类网络的方式
2020/06/11 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
往来会计岗位职责
2013/12/19 职场文书
中学教师师德承诺书
2014/05/23 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
入党申请书格式
2019/06/20 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python