簡易ウォーターフォールフローエフェクト（自作本体フォーム）

簡易ウォーターフォールフローエフェクト（自作本体フォーム）_jquery

WBOY

リリース： 2016-05-16 17:33:18

オリジナル

1098 人が閲覧しました

何もすることがないので、自分でウォーターフォールフローを書きました。スクリプトや Web ページを書くときの私の個人的な習慣は、他の人の結果を参照するだけで、他の人のコードをほとんど参照しないことです。推論するためにレビュー要素を使用することもあります。ソースコードを見るよりもコードを見てください。これが良い習慣なのかどうかはわかりません。途中の工程にかなりの時間がかかりましたが、自分が作ったものは今でも細部まで覚えています（もちろん後で必ず忘れますが）。本題に入ります:

ウォーターフォールフローの本体は、いくつかの ul タグです。新しく追加された要素は、現在の ul の高さに応じて、特定の ul の形式で選択的に挿入されます。
本体の形式は次のとおりです:

コードをコピーコードは次のとおりです:

img />

anytext..

;img />

任意のテキスト;/div>
....

コードは次のとおりです。

.pics { float:left; マージン左: 10px; 、幅: 230px; 、マージン: 10px; 位置: 相対; ; } .pic {

幅:92%; マージン:0 自動;

 フォントサイズ:180px; 
} 
.pic img { 
 width:100%; 
 margin: 0 auto; >.content { 
 width:92%; 
 padding-top:10px; 
 height:50px; 
 overflow:hidden; 

 

 




コードをコピー 


 コードは次のとおりです。 

 
$(function(){ 
 //alert($(window).height()); ブラウザの現在のウィンドウの表示領域の高さ 
//alert($(document).height());現在のウィンドウのドキュメントalert($(document.body).height()); 
/ /ブラウザの現在のウィンドウのドキュメント本体の高さalert($(document.body).outerHeight(true)); 
//ブラウザの現在のウィンドウのドキュメント本文の高さの合計には、境界線のパディングマージンが含まれます。alert($(window).width ()); 
//ドキュメントの表示領域の幅ブラウザの現在のウィンドウalert($(document).width()); 
//ブラウザの現在のウィンドウのドキュメントオブジェクトの幅alert($(document.body).width()); 🎜>//ブラウザの現在のウィンドウのドキュメント本文の高さalert($(document.body).outerWidth(true)); 
//ブラウザの現在のウィンドウのドキュメント本文の幅の合計ブラウザには境界線のパディングマージンが含まれています 
$(document).scroll(function(){ 
var pics=$(".pics"); 
var sc=$(document).scrollTop(); 
$(" #float").text(sc); 
for(var i=0;ivar pic=pics.eq(i);ボトム =pic.offset().top pic.height(); 
if((sc $(window).height())>=bottom){ 
eval( "var word=" '"\ u' (Math .round(Math.random() * 20901) 19968).toString(16) '"'); 