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


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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
神族 PROTOSS 概述
2020/03/14 星际争霸
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php不写闭合标签的好处
2014/03/04 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python遍历pandas数据方法总结
2018/02/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
numpy返回array中元素的index方法
2018/06/27 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
函授自我鉴定范文
2014/02/06 职场文书
《燕子》教学反思
2014/02/18 职场文书
工会换届选举方案
2014/05/21 职场文书
会计岗位职责
2015/02/03 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Java8中接口的新特性使用指南
2021/11/01 Java/Android