A simple waterfall stream effect (self-writing in Subject Form) _ jquery

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. The specific implementation is as follows, if you are interested, you can refer to the following: I wrote a waterfall stream by myself. My 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:

The Code is as follows:

　　

　　　　

• Anytext ..


　　　　

• Anytext ..


...
　　

　　

• Anytext ..


　　　　

• Anytext ..


...
　　

....

Css is defined as follows:

The 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:

The 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 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 ="

"+ Word +"

In the dream, passers-by smiled and looked back at the corridor.

";
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: