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

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:

　

　
• div>

  anytext..

  
  　　
• 

  anytext..

  
  　...
  　
  　

  • 
    anytext..
  > ;
  　
  • 
    anytext..
    li>
    　 ....
    　

  
  　....
  
  
  

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 " div>> }
}
});
});


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: