Use JS to achieve the picture display waterfall flow effect (simple example) _javascript technique

I do not know if you have found that the general image display site will use the waterfall flow effect, the so-called waterfall flow

Is that the image of the site will not be cached all at once, but when you scroll to a certain distance,

The following picture will continue to cache, and the picture is random, just the same width, height is not

, jagged is like a waterfall, so it's called a waterfall effect. Below I put the code to everyone, everybody

Try the next few pictures.

<!
  DOCTYPE html>