蘑菇街商品的信息,一个接一个,衔接紧密,根据浏览器大小有几列,元素等宽不等高,向下滑动加载 就是常见的瀑布流布局,
实现瀑布流布局有三种方式,JavaScript原生,jQuery,和CSS3 column方法。
我写了JavaScript 和jQuery两种。
jQuery相对于js的优点就是,获取,定义,遍历元素方便,有很多封装的函数,支持连缀,隐式迭代。
如要获取一个类名为box的元素,js需要写一个函数,而jQuery 只需要$('#main>div),
如果要遍历元素,js需要写一个for函数,而jQuery只需要each函数,
如果要获取数组中指定元素的索引,js需要写一个函数,而jQuery只需要inArray函数,
如果要写元素的样式,js需要单独定义style,而jQuery只需要css函数。
jQuery思路就是
1、 html写好整体的盒子框架,div块,
2、css 设置好图片的相对定位,样式,块元素,浮动,
3、jquery
封装成一个函数 waterfall()
(1)根据浏览器的宽度和定义的图片的统一的宽度来计算有几列。
(2)获取第一行图片的高度,找到最矮的索引让第二行第一个元素排列在下面。
(3)定位图片的位置要修改css样式,并要实时更新高度数组,以便下一个图片定位到正确的位置。
封装成一个函数 checkScrollSlide()
(4)判断是否要加载的情况,规定当最后一个图片露出一半的时候开始加载。
(5)如何判断,比较 最后一个图片到父元素盒子的高度加上自身一半的高度 和 浏览器窗口的高度加上滚动条滚过的高度,
因为前者是固定的,后者随着滑动变化,如果前者大于后者,说明还没滑到,如果小于后者,就说明是时候加载了。
(6)返回true后,定义加载事件,创建html元素,渲染后台的数据,添加到页面后面,注意最后要继续调用waterfall()函数。
注意:有的参数如value,获取的是DOM对象,而jQuery方法不能直接对DOM对象进行操作,所以需要用$() 转化成jQuery对象。
大体的思路就这个了,细节的如何实现,看接下来放上js源码。
$(window).on('load',function(){
waterfall();
//模拟后台数据
var dataInt ={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
$(window).on('scroll',function(){
if (checkScrollSlide){
// 遍历后台的数据
$.each(dataInt.data,function(key,value){
// 直接用jQuery方法就可以创建元素,添加类名,添加到父元素后面,方法可以通过.迭代
var oBox = $('<div>').addClass('box').appendTo('#main');
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
var oImg = $('<img>').attr('src','img/'+ $(value).attr('src')).appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall(){
//包含选择器, 空格选择器会选择所有的子元素
// > 取mian元素的第一个子元素
var $boxs = $('#main>div');
// 列宽 width()只能获得图片的宽度,
// outerWidth()能获得包括边界的宽度
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width()/w);
$('#main').width(cols*w).css('margin', '0 auto');
var hArr=[];
// jquery的遍历方法
$boxs.each(function(index,value){
//console.log(value); 打印的是dom对象,
// 获取每个图片的高
var h=$boxs.eq(index).outerHeight();
if (index<cols){
// 获取第一行的高度
hArr[index]=h;
}
else{
// 获取最矮的图片的索引
var minH = Math.min.apply(null,hArr);
// inArray函数能获取指定数值的索引
var minHIndex = $.inArray(minH,hArr);
// value是dom对象,不能直接用jQuery方法直接操作
// 要转换为jQuery对象
$(value).css({
'position':'absolute',
'top':minH +'px',
'left':minHIndex*w +'px'
})
// 在else循环中 改变的是加上下一行元素后的高度
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
//console.log(hArr);
}
function checkScrollSlide(){
// 获取最后一个图片
var $lastBox = $('main>div').last();
// 最后一个图片距离父元素的高度和自身一半的高度
var lastBoxDis = $lastBox.offset().height+Math.floor($lastBox.outerHeight());
// 划过的高度
var scrollTop = $(window).scrollTop();
// 浏览器的高度
var documentH = $(window).height();
return(lastBoxDis<scrollTop+documentH)?true:false;
}
注:如果有错误的言词,可以提醒我更正。