028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
怎么用JavaScript和jQuery实现瀑布流
这篇文章主要介绍“怎么用JavaScript和jQuery实现瀑布流”，在日常操作中，相信很多人在怎么用JavaScript和jQuery实现瀑布流问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JavaScript和jQuery实现瀑布流”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联公司长期为成百上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为怀化企业提供专业的成都网站设计、成都网站建设，怀化网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
用JavaScript实现
基本结构：
...
...
...
基本样式：
*{
margin: 0px;
padding: 0px;
}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}思路：
1、获取#main下的所有.box
2、计算页面中图片有几列，并设置页面的宽度
3、找出这几列中高度最小的列
4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面
5、更新列的高度，重复3、4、5步骤，直至图片加载完
6、根据最后一张图片的位置确定是否继续加载图片（懒加载）
实现：
1、获取#main下的所有.box
//将main下的所有class为box的元素取出来
var oParent = document.getElementById(parent);
var oBox = getByClass(oParent,box);
// 根据class获取元素
function getByClass(parent,clsname){
var arr = [];//用来存储获取到的所有class为box的元素
var oElement = parent.getElementsByTagName('*');
for(var i=0;i2、计算页面中图片有几列，并设置页面的宽度
//计算整个页面显示的列数（页面宽/box的宽）
var oBoxW = oBox[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽
oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;';
3、找出这几列中高度最小的列
4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面
5、更新列的高度，重复3、4、5步骤，直至图片加载完
//存储每列的高度
var hArr = [];
for(var i=0;i//获取每列高度最小的索引值
function getMinIndex(arr,value){
for(var i in arr){
if(arr[i] == value){
return i;
}
}
}6、根据最后一张图片的位置确定是否继续加载图片（懒加载）
假设是后台给的数据
//数据
var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; 当滚动条滚动时执行
//滚动条滚动时
window.onscroll = function(){
scrollSlide(dataInt);
} 根据最后一张图片的位置，来判断是否进行加载
//判断是否具有了滚条加载数据块的条件
function checkScrollSlide(parent,clsname){
var oParent = document.getElementById(parent);
var oBox = getByClass(oParent,clsname);
var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.documentElement.clientHeight || document.body.clientHeight;
return (lastBoxH < scrollTop + height)? true:false;
}加载图片
//滚动条滚动时执行
function scrollSlide(dataInt){
////判断是否具有了滚条加载数据块的条件
if(checkScrollSlide('main','box')){
var oParent = document.getElementById('main');
//将数据块渲染到当前页面的尾部
for(var i=0;i用jQurey实现
用jQuery实现的思路都是一样的，就直接放代码
$(window).on('load',function(){
waterfall();
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
$(window).on('scroll',function(){
scrollSlide(dataInt);
})
});
function waterfall(){
var $oBox = $('#main>div');
var oBoxW = $oBox.eq(0).outerWidth();
var cols = Math.floor($(window).width()/oBoxW);
$('#main').css({
'width' : cols * oBoxW,
'margin' : '0 auto'
});
var hArr = [];
$oBox.each(function(index,value){
var oBoxH = $oBox.eq(index).height();
if(indexdiv').last();
var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
var scrollTop = $(window).scrollTop();
var clientH = $(window).height();
return (lastBoxH < scrollTop + clientH) ? true : false;
}
function scrollSlide(dataInt){
if(checkScrollSlide()){
$.each(dataInt.data,function(index,value){
var $Box = $('').addClass('box').appendTo('#main');
var $Pic = $('
').addClass('pic').appendTo($Box);
$('
![]()
').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
})
waterfall();
}
}
到此，关于“怎么用JavaScript和jQuery实现瀑布流”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
当前标题：怎么用JavaScript和jQuery实现瀑布流
URL标题：
http://kswsj.cn/article/igosdp.html
