jquery代码实现简单的随机图片瀑布流效果

时间：2021-05-26

为了便于大家理解我使用了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{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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章