jquery代码实现简单的随机图片瀑布流效果
更新时间:2015年04月20日 10:59:00 投稿:hebedich
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家,有需要的小伙伴参考下吧。
为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练
代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery随机图片瀑布流无限加载</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* container */ #container{width:940px;margin:50px auto;} #container ul{width:300px;list-style:none;float:left;margin-right:20px;} #container ul li{margin-bottom:20px;} #container ul li img{width:300px;} </style> </head> <body> <div id="container"> <ul class="col"> <li><img src="201405/-1.jpg" alt=""/></li> <li><img src="201405/-2.jpg" alt=""/></li> <li><img src="201405/-3.jpg" alt=""/></li> </ul> <ul class="col"></ul> <ul class="col" style="margin-right:0"></ul> </div> <script type="text/javascript" src="/ajaxjs/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ function loadMeinv(){ var data = 0; for(var i=0;i<9;i++){//每次加载时模拟随机加载图片 data = parseInt(Math.random()*9); var html = ""; html = '<li><img src = /-' +data+'.jpg><p>src=' +data+'.jpg</p></li>'; $minUl = getMinUl(); $minUl.append(html); } } loadMeinv(); $(window).on("scroll",function(){ $minUl = getMinUl(); if($minUl.height() <= $(window).scrollTop()+$(window).height()){ //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片 loadMeinv(); } }) function getMinUl(){//每次获取最短的ul,将图片放到其后 var $arrUl = $("#container .col"); var $minUl =$arrUl.eq(0); $arrUl.each(function(index,elem){ if($(elem).height()<$minUl.height()){ $minUl = $(elem); } }); return $minUl; } }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> <div>https://www.jb51.net/</div> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章
jQuery实现动态加载(按需加载)javascript文件的方法分析
这篇文章主要介绍了jQuery实现动态加载(按需加载)javascript文件的方法,结合实例形式分析了jQuery根据调用函数按需动态加载javascript文件相关实现技巧,需要的朋友可以参考下2019-05-05jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
焦点图片切换在网页制作的商品展示中经常会用到,这样的效果可以给用户带来耳目一新的感觉同时也是用户比较追捧的,本文也实现了一个这样的焦点图片切换效果,感兴趣的你可以参考下啊,希望本文对你有所帮助2013-01-01JQuery的Ajax中Post方法传递中文出现乱码的解决方法
这篇文章主要介绍了JQuery的Ajax中Post方法传递中文出现乱码的解决方法,较为深入的分析了Ajax的post方法出现乱码的原因,以及具体的解决方法,需要的朋友可以参考下2014-10-10
最新评论