瀑布流新闻网站
预览地址:由于购买的新域名还在解析中,暂无预览地址
瀑布流原理:
重点是图片宽度都一样,当图片加载之后,通过查找图像高度最低的那一列,通过绝对定位设置图片位置
1、设置两个变量,变量colHeightArray每一列图片的高度,变量colCount 每一行放图片的数量
2、用容器的宽度除以img的outerWidth(true),通过for循环初始化colHeightArray
3、当图片加载之后,遍历colheightarray数组,查找数组中高度最低的那一列,并获取行数和列数
4、通过绝对定位设置图片位置,并更新colHeightArray图片的列高度
实现原理
getData函数:发送ajax每次获取perPageCount条(这里设置是10条)数据,获取次数用curPage计算 getnode函数:把每次获取的10条数据,拼装成jquery对象$node waterFallPlace函数:把每次获取并显示页面10条的数据按照瀑布流的方式排列
两次状态判断: 1、 isDataArrive让发送数据过程,不能重复发送 2、 isVisible判断元素是否到底了