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:

　

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn