[妙味Ajax]第二课:实例:留言板、瀑布流
知识点总结
瀑布流原理(固定布局)
总宽度大小固定
每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局
计算最短的一列,将Div插到最短的一列处(li里面包div)(getShort函数)
即
<ul>
<li>
<!--div是JS创建的-->
<div></div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
鼠标滚轮事件(window.scroll):
判断:当最短的LI的高度+LI到页面顶部的高度(getTop函数) < 滚动条高度+可视区的高度,需要加载另外一批的数据
注意:由于scroll的连续触发的事件,会导致加载了N批数据,解决办法需要用到boolean来判断,每次只加载一批数据
//获取最短Li的位置
function getShort(){
var index = 0;
var ih = aLi[index].offsetHeight;
for (var i=1; i < iLen; i++) {
if (aLi[i].offsetHeight < ih) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}
留言薄
1、导入数据库,通过接口文档和参数,来处理ajax数据
2、通过cookie来判断用户是否登陆,使用getCookie函数
[妙味Ajax]第二课:实例:留言板、瀑布流的更多相关文章
- [妙味Ajax]第一课:原理和封装
知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...
- [妙味 DOM] 第二课:DOM、BOM相关方法及属性
知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange ...
- [妙味Ajax]第三课:AJAX跨域解决方案:JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
- [妙味DOM]第一课:DOM基础概念、操作
知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- LigerUi框架+jquery+ajax无刷新留言板系统的实现
前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...
- NeHe OpenGL教程 第二十课:蒙板
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- ajax练习四留言板
留言界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
随机推荐
- Flexible 弹性盒子模型之CSS flex-wrap 属性
实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...
- ADO.NET初学习
①System.Data → DataTable,DataSet,DataRow,DataColumn,DataRelation,Constraint,DataColumnMapping,DataT ...
- 【CSS学习笔记】超链接标签
有些网址后面为什么是#? 比如,href="http://www.xxx.com/index.html/#q2"标示网页index.html的q2位置处,浏览器读取这个URL后,会 ...
- git stash让bug来的更猛烈些吧
git stash可以用来暂存当前正在进行的工作,比如想pull最新的代码,又不想加新commit, 或者有一个紧急的bug需要修复,但是这个bug又与你已经在做的工作(还没完成)有关联.这个时候有的 ...
- [Q]“获取AutoCAD安装信息时失败...”解决方法
“获取AutoCAD安装信息时失败...”解决方法:在“setup.exe”上右键,以管理员权限运行即可.
- USB硬盘 raw之后,DiskGenius 恢复
最近,为了在E560上安装LINUX(先是gentoo,后是rhel7,最后是 centos7),用UltralISO 把一块移动硬盘给写成RAW格式了.现在又想把移动硬盘给恢复回去.采用一些方法,效 ...
- 【 VS 插件开发 】三、Vs插件简单功能的实现
[ VS 插件开发 ]三.Vs插件简单功能的实现
- asp.net——初识多线程
1.首先讲解一下什么是线程(该定义是参考线程的百度百科) 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针( ...
- 《C++反汇编与逆向分析技术揭秘》——流程控制语句的识别
if...else...语句 示例: if构成多分支语句 switch 有序线性的switch: 3E82D8位置存放了一个表,标明了要跳转到的地址: 这里的每四字节都标明的是每个case块的首地址: ...
- mac 搭建node 开发环境记录
安装homebrew: enter 键 后 输入电脑密码 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i ...