• 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加载图片)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了瀑布流,绝对定位布局等相关知识,希望对您有所帮助,也希望大家支持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实现的瀑布流加载效果示例

相关文章

  • 2017-08-16浅析Jquery操作select
  • 2017-08-16完美解决jQuery的hover事件在IE中不停闪动的问题
  • 2017-08-16jQuery获取radio选中项的值实例
  • 2017-08-16JQuery遍历json数组的3种方法
  • 2017-08-16JQuery的ON()方法支持的所有事件罗列
  • 2017-08-16Jquery实现的一种常用高亮效果示例代码
  • 2017-08-16jquery实现textarea输入字符控制(仿微博输入控制字符)
  • 2017-08-16jquery点击改变class并toggle的实现代码
  • 2017-08-16jQuery如何使用自动触发事件trigger
  • 2017-08-16jQuery中insertAfter()方法用法实例

文章分类

  • 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图片倾斜层叠切换特效代码分享
    • jQuery实现的简单拖动层示例
    • 让人印象深刻的10个jQuery手风琴效果应用
    • Jquery通过JSON字符串创建JSON对象
    • jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
    • JS Canvas定时器模拟动态加载动画
    • jquery UI Datepicker时间控件的使用方法(终结版)
    • jquery实现页面虚拟键盘特效
    • input 和 textarea 输入框最大文字限制的jquery插件

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

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