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

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

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

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

<div id="main">
<ul class="pics"> <div class="pic"> img /></ div> <div class="content">anytext..</div>
<li><div class="pic"> ;img /></div> <div class="content"></li>
</ul> <ul class="pics "> <div class="pic"><img /></div>任意のテキスト/div> </li>
;<li><div class="pic"><img /></div>任意のテキスト;/div>
....
</ul>

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

.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) '"');

var li="<li> <div class='pic'>" word "</ div>> }
} }); });

これは基本的に最も単純なウォーターフォール フローを実装しますが、スクリプトはメモリ消費、つまり無限ロードの問題を考慮していません。今は理解できていないので、後で改善します。
効果を見てみましょう: