jq/js/css3瀑布流

$(document).width() height() 获取内容的宽高
$(window).width() height() 浏览器的宽高 //相当于可以document.documentElement.clientHeight
$(obj).width() height() 要获得的对象宽高
还有一种 $(obj).width() 普通宽 true) padding+border+margin
$(“#img1”).offset().left $(“#img1”).offset().top 到上左的距离
$(document).scrollTop() $(document).scrollLeft() 获取滚动的距离 使用window和document一样
e.pageX e.pageY 鼠标的坐标

项目原码地址：https://github.com/SummerXll123/js-jq-demo/blob/master/js-jq%E7%80%91%E5%B8%83%E6%B5%81.html

 

瀑布流特点：等宽不等高，瀑布流的效果，页面都是由很多数据块(这里将数据块分成多列)组成，每个数据块的高度不等，

思路

1、首先获取每列的高度,保存在一个数组中，然后求数组中最小项的值

2、(滚动条下拉)判断什么时候再次请求数据

当浏览器 视口高度+scrollTop 大于等于 最小列的底部位置时，再次请求数据

3.循环处理数据,每插入一个数据块，需要更新min_h,这样每次插入都是最先插入到高度最小列中

 

当浏览器 视口高度+scrollTop 大于等于 最小列的底部位置时，再次请求数据

列数=浏览器窗口宽度/图片宽度，图片定位是根据每一列数据库的高度进行定位
图片排序是按照计算的位置横向排列，位置是计算出来的，比较规范。

css

js

jq

 

转载于:https://www.cnblogs.com/summerXll/p/6510503.html