A simple waterfall effect (subject-based self-writing)

I wrote a waterfall stream by myself. My personal habit of writing scripts or webpages is: I only refer to others' effects and seldom refer to others' codes, sometimes I prefer to use the review element to deduce the Code, rather than look at the source code. I don't know if this is a good habit. Although the intermediate process took me a lot of time, I can still remember every detail of my work (of course I will forget it later) because it was implemented by me. The topic is as follows:

The main body of the waterfall stream is several ul labels. Newly Added elements are inserted to a ul in the form of li according to the current ul's height and selectivity.
The subject format is as follows:
Copy codeThe Code is as follows:
<Div id = "main">
<Ul class = "pics">
<Li> <div class = "pic"> </div> <div class = "content"> anytext... </div> </li>
<Li> <div class = "pic"> </div> <div class = "content"> anytext... </div> </li>
...
</Ul>
<Ul class = "pics"> <li> <div class = "pic"> </div> <div class = "content"> anytext .. </div> </li>
<Li> <div class = "pic"> </div> <div class = "content"> anytext... </div> </li>
...
</Ul>
....
</Div>

Css is defined as follows:
Copy codeThe Code is as follows:
. Pics {
Float: left;
List-style: none;
Margin-left: 10px;
Margin-right: 10px;
Width: 230px;
}
. Pics li {
Display: block;
Width: 100%;
Margin: 0 auto;
Margin-bottom: 10px;
Position: relative;
Background-color: # FFF;
Box-shadow: 0 1px 2px 0;
Padding-top: 10px;
}
. Pic {
Width: 92%; margin: 0 auto;
Padding-top: 10px;
Text-align: center;
Font-size: 180px;
Background-color: # 0CF;
}
. Pic img {
Width: 100%;
Margin: 0 auto;
}
. Content {
Width: 92%;
Margin: 0 auto;
Padding-top: 10px;
Height: 50px;
Text-overflow: ellipsis;
White-space: nowrap;
Overflow: hidden;
}

The script is implemented as follows:
Copy codeThe Code is as follows:
$ (Function (){
// Alert ($ (window). height (); the visible area height of the current window of the browser
// Alert ($ (document). height ());
// Alert ($ (document. body). height () of the current window document in the browser ());
// Alert ($ (document. body). outerHeight (true) of the current file body in the browser window ));
// The total height of the current browser window document body includes border padding margin alert ($ (window). width ());
// The visible area width of the current window in the browser. alert ($ (document). width ());
// The width of the document Object in the current window of the browser. alert ($ (document. body). width ());
// Alert ($ (document. body). outerWidth (true ));
// The total width of the current file body in the browser window includes border padding margin.
$ (Document). scroll (function (){
Var pics = $ (". pics ");
Var SC = $ (document). scrollTop ();
$ ("# Float"). text (SC );
For (var I = 0; I <pics. length; I ++ ){
Var pic = pics. eq (I );
Var bottom = pic. offset (). top + pic. height ();
If (SC + $ (window). height ()> = bottom ){
Eval ("var word =" + '"\ U' + (Math. round (Math. random () * 20901) + 19968 ). toString (16) + '"');
Var li = "<li> <div class = 'pic '>" + word + "</div> <div class = 'content'> the passengers in the dream smile and look at the corridor, qiu hongzang </div> </li> ";
Pic. append (li );
}
}
});
});

In this way, the simplest waterfall stream is basically implemented, but the memory consumption is not considered in the script, that is, the infinite loading problem. I do not understand it now. I will try again later.
See the results: