A simple waterfall flow effect (self-written main body form)

A simple waterfall flow effect (self-written main body form)_jquery

WBOY

Release： 2016-05-16 17:33:18

Original

1098 people have browsed it

I have nothing to do, so I wrote a waterfall flow by myself. My personal habit of writing scripts or web pages is: I only refer to other people's results and rarely refer to other people's codes. Sometimes I would rather use review elements to infer the code than to 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 what I made (of course I will definitely forget it later), because I realized it. Let’s get to the point:

The main body of the waterfall flow is several ul tags. The newly added elements are selectively inserted into a certain ul in the form of li according to the height of the current ul.
The main body form is as follows:

Copy code The code is as follows:

anytext..

< /div>
anytext..

anytext..
　
anytext..

　 ....

　....

Copy code

The code is as follows: .pics { float:left; list-style:none ;

　 margin-left:10px;

　 margin-right:10px; 
　 width:230px; %; 
 　 margin: 0 auto; 
 　 margin-bottom: 10px; 
 　 position: relative; > 　　 padding-top:10px; 
} 
.pic { 
　 width:92%; margin:0 auto; 
　 padding-top:10px; > font-size:180px; 
 background-color:#0CF; 
} 
.pic img { 
 width:100%; 
 margin: 0 auto; >.content { 
　width:92%; 
　margin:0 auto; 
　padding-top:10px; 
　height:50px; space:nowrap; 
　 overflow:hidden; 
} 

 

The script is implemented as follows: 
 




Copy Code 


 The code is as follows: 

 
$(function(){ 
//alert($(window).height()); The current window of the browser can View area height 
//alert($(document).height()); 
//Height of the browser’s current window document alert($(document.body).height()); 

/ /The height of the document body in the current window of the browser alert($(document.body).outerHeight(true));
//The total height of the document body in the current window of the browser includes border padding margin alert($(window).width ()); //The width of the visible area of the current window of the browser alert($(document).width()); //The width of the document object of the current window of the browser alert($(document.body). width());
//The height of the document body in the current window of the browser alert($(document.body).outerWidth(true));

//The total width of the document body in the current window of the browser includes border padding margin $(document).scroll(function(){ var pics=$(".pics"); var sc=$(document).scrollTop(); $(" #float").text(sc); for(var i=0;ivar 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 "> }
}
});
});

This basically implements the simplest waterfall flow, but the script does not consider memory consumption, that is, the issue of infinite loading. I don't understand it now, I'll improve it later.
Let’s see the effect: