[妙味Ajax]第二课:实例:留言板、瀑布流

时间:2023-02-13 00:12:54

知识点总结

瀑布流原理(固定布局)

    总宽度大小固定

    每列宽度固定,比如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]第二课:实例:留言板、瀑布流的更多相关文章

  1. &lbrack;妙味Ajax&rsqb;第一课:原理和封装

    知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...

  2. &lbrack;妙味 DOM&rsqb; 第二课:DOM、BOM相关方法及属性

    知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange ...

  3. &lbrack;妙味Ajax&rsqb;第三课:AJAX跨域解决方案:JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  4. &lbrack;妙味DOM&rsqb;第一课:DOM基础概念、操作

    知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...

  5. 妙味课堂——HTML&plus;CSS&lpar;第一课&rpar;

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  6. LigerUi框架&plus;jquery&plus;ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  7. NeHe OpenGL教程 第二十课:蒙板

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  8. ajax练习四留言板

    留言界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. 妙味课堂&colon;JavaScript初级--第11课:字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

随机推荐

  1. webuploader上传文件,图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  2. iOS 懒加载不起作用的原因

    在.m类中定义了一共strong属性,用懒加载getter方式去处理,发现用的时候无论如何属性都是null,调试后,发现根本没进getter方法. (ps:懒加载,又称为延迟加载.说的通俗一点,就是在 ...

  3. Oracle基础 各种语句的定义格式

    Oracle内建数据类型 一. 字符数据 1. char(size) 2. varchar2(size) 最常用,最大长度4000字节 3. nvhar(size).nvarchar(size) 4. ...

  4. 对XX证券报关于物联网操作系统的几个问题的答复

    XX证券报提问了几个关于物联网和物联网操作系统的问题,个人表达了一些粗陋的观点,在这里发表出来,与行业朋友交流和探讨. 物联网行业最需要解决的问题是什么? 虽然物联网这个行业被炒得比较热,但是截至目前 ...

  5. FPGA工程中用C语言对文件进行处理&lowbar;生成mif文件

    本博客中有用verilog处理文件数据的代码,本博文采用C 处理文件中的数据. 有时候要生成一个mif文件—— altera memory  initial file.本次工程中我得到的是一个大型的数 ...

  6. leetcode第29题--Substring with Concatenation of All Words

    problem: You are given a string, S, and a list of words, L, that are all of the same length. Find al ...

  7. jquery对象介绍及一些jquery小特效

    一.jquery对象的介绍. 引入jquery库后,通过形如$("#id")的方式得到的对象叫做jquery对象.如var $uu = $("#username&quot ...

  8. MySQL 性能方案

    翻译自 dev.mysql.com/doc/refman/5.6/en/performance-schema.html 一.3个基本库 数据库初始化安装完毕会有三个基本库mysql .informat ...

  9. 剑指offer(41)和为S的连续正数序列

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  10. C&num;の----Func&comma;Action&comma;predicate在WPF中的应用

    首先介绍下,winform中可以用this.invoke来实现:wpf中要使用调度器Control.Despite.invoke: (Action)(()=> { })和 new Action ...