• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了瀑布流,绝对定位布局等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
瀑布流-绝对定位布局,与浮动布局的区别在于

1.布局不一样:
  绝对定位:一个UL里面放置所有的绝对定位的LI;
  浮动布局:多个(一般三四个)UL分布放置LI;
2.AJAX不一样
  绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置;
  浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置。会自动向下排列;

一、功能分析:

  1.定位每一个LI,即设置每一个LI的TOP和LEFT值;
  2.将AJAX的数据,放在LI中,插入到UL当中;

二、实现过程:

  1.设置LI的LEFT;
    在那一列?有了列数再乘以每个LI的宽度,就可以确定LEFT值
    找规律:
    现在我需要三列,那么每一列当中的LI,都有一个共同的列号(自己设置0.1.2或者A.B.C,总之自己对这三列给一个标识)这里设为
    0号第一列
    1号第二列
    2号第三列
    所以每一行,只能放三个LI
    第一个li 在 0号 第二个li 在 1号 第三个li 在 2号
    第四个li 在 0号 第五个li 在 1号 第六个li 在 2号
    所以想到用索引取模,正好可以得出0 1 2 ,0 1 2 ……
    通过这个我们就可以判断LI在那一列;
    index%3 = 0 1 2 ,0 1 2 ……
    为什么要模3,因为要得出三个数的循环。所以以后要想得出这样的循环,都可以考虑取模运算;
  2.设置TOP的值;
    因为每一列的总高度值都是不一样的。所以我们要设三个变量来存放不同列的高度值。
    为什么要取得这个值?
    1.初次加载的时候LI,的TOP值,是根据当前列高度值来设置的;
2.因为AJAX请求后的数据LI要插入到UL当中,必需知道当前列现在的总高度,然后给新的LI为它的TOP值;
其实中间有很多可以说的。但实在是太长了。我代码中注释也写的很清楚了。有问题可以留言和我交流。!!
要提一点的就是,里面有很多相同的功能,我都写到一个FUNCTION当中,方便调用。例如要设LI的TOP和LEFT,要获取LI的列数,要设置列的总高度。这都是共公的,也是功能块,所以还是单独用函数写出来好;
DEMO下载 (这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV,里面的是APACHE)
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery Masonry瀑布流布局神器使用详解
  • jquery.masonry瀑布流效果
  • 基于jQuery实现瀑布流页面
  • jQuery图片瀑布流的简单实现代码
  • jquery实现超简单的瀑布流布局【推荐】
  • jQuery Masonry瀑布流插件使用方法详解
  • jquery实现简单的瀑布流布局
  • 网页瀑布流布局jQuery实现代码
  • 利用jquery实现瀑布流3种案例
  • jQuery实现的瀑布流加载效果示例

相关文章

  • 用JQuery在网页中实现分隔条功能的代码
  • jquery ajax提交整个表单元素的快捷办法
  • jquery实现(textarea)placeholder自动换行
  • jQuery validate 验证radio实例
  • jQuery中hasClass()方法用法实例
  • jQuery+CSS实现一个侧滑导航菜单代码
  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
  • lyhucSelect基于Jquery的Select数据联动插件
  • jQuery代码实现图片墙自动+手动淡入淡出切换效果
  • jquery对象和javascript对象即DOM对象相互转换

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery 1.0.2
    • jQuery 中关于CSS操作部分使用说明
    • jquery实现超简洁的TAB选项卡效果代码
    • jQuery时间轴插件使用详解
    • jquery自动完成插件(autocomplete)应用之PHP版
    • jquery text()方法取标签中的文本
    • 用JQuery调用Session的实现代码
    • Jquery + Ajax调用webService实例代码(asp.net)
    • 使用jQuery仿苹果官网焦点图特效
    • JQuery中getJSON的使用方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有