如何使用JavaScript和jQuery实现瀑布流-创新互联
这篇文章给大家分享的是有关如何使用JavaScript和jQuery实现瀑布流的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的舒城网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!用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实现瀑布流”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:如何使用JavaScript和jQuery实现瀑布流-创新互联
分享网址:http://pwwzsj.com/article/cspecs.html