<!DOCTYPE html><html><head><meta charset="UTF-8"><title>瀑布流</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="1.jpg" ?/></li><li><img src="2.jpg" ?/></li><li><img src="3.jpg" ?/></li></ul><ul class="col"></ul><ul class="col" style="margin-right:0"></ul></div><script src="https://code.jquery.com/jquery-3.0.0.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></body></html>
js随机图片瀑布流
原文地址：https://www.cnblogs.com/yjgbk/p/9990653.html