The jquery code implements a simple random image waterfall flow effect

  • 2020-06-01 08:09:36
  • OfStack

I used jQuery to make it easy for everyone to understand. Of course, it is more efficient to use the source-generated js code, but many people are not familiar with multi-source js


<html xmlns="">
<title>jquery Random image waterfall flow loads indefinitely </title>
<style type="text/css">
body{font:12px/180% Arial, Helvetica, sans-serif, " The new song typeface ";}
/* 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;}
<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 class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
<script type="text/javascript" src="/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function loadMeinv(){
var data = 0;
for(var i=0;i<9;i++){// Simulate loading images randomly each time you load them 
data = parseInt(Math.random()*9);
var html = "";
html = '<li><img src = /-'
$minUl = getMinUl();
$minUl = getMinUl();
if($minUl.height() <= $(window).scrollTop()+$(window).height()){
// When one of the shortest ul Is higher than the window rolls out + Load a new image when the browser is high in height 
function getMinUl(){// Get the shortest at a time ul, Put the image after it 
var $arrUl = $("#container .col");
var $minUl =$arrUl.eq(0);
$minUl = $(elem);
return $minUl;
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

That's all for this article, I hope you enjoy it.

Related articles: