JavaScript はウォーターフォール フローと読み込み効果を実装します

この記事では主にウォーターフォールフローとローディング効果を実装するためのJavaScriptの関連情報を詳しく紹介しますので、興味のある方は参考にしてください

1. ウォーターフォールフローとは何ですか?

ウォーターフォール フローは、比較的一般的な Web サイトのページ レイアウトであり、ページ スクロール バーが下にスクロールすると、このレイアウトはデータ ブロックを継続的に読み込み、現在の末尾に追加します。

滝の流れのレイアウトを採用した最初の Web サイトは Pinterest で、中国で徐々に人気が高まりました。たとえば、百度の写真のレイアウトは「昔」、まだ百度の写真をページごとにクリックする必要がありました。もっと写真を見る 現在の滝の流れのレイアウトにより、ユーザーは写真を見つけやすくなります。

2. ウォーターフォールの長所と短所

利点: ページ上のスペースを節約し、ナビゲーション ボタンやページ番号ボタンが不要になります。 2. ユーザー エクスペリエンスが次のページの検索方法や操作の切り替えではなく、写真の閲覧に重点が置かれるように強化します。

欠点:

1. 使用される Web ページの種類が限られている: このウォーターフォール フロー レイアウトは、一部の特定の種類の製品の一部の特定の種類のコンテンツにのみ適しています。

たとえば、特定の店舗で何かを購入するとき、どのページのどの商品を購入するかを覚えてから、戻って購入する必要があります。このとき、覚えておくためにページ ボタンが必要です。滝の流れの方が厄介です。

2. 決して表示されないフッター:

ウォーターフォール フローの無限スクロール読み込みモードを使用すると、ユーザーがページの下部を何度も閲覧してもフッターが表示されなくなります。 、フッターが表示されますが、自動的に読み込まれたコンテンツが突然表示されるため、何があってもフッター内のリンクをクリックしたりログインしたりすることができず、ユーザーエクスペリエンスが非常に悪くなり、怒ってWebページを閉じる可能性があります。

3. ページ数について:

ユーザーにとって、従来のページ変更を置き換えるためにウォーターフォール フローの自動読み込みを使用するのは非常に便利ですが、開発者の Web サイトの場合、ページの削減によりローカルに表示できるページ数が増えなくなる可能性があります。関連情報を確認すると、最も明らかなのは広告の削減です。

3. ウォーターフォールフローの書き方と原理

では、ウォーターフォールフローとはどのようなものなのか、簡単なウォーターフォールフローのレイアウトを書いてみましょう。まず、乱雑な基本スタイルとレイアウトを整理しましょう~ここではスペースを節約するためにインデントしません~CSS:

*{margin: 0;padding: 0;}  
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}

HTML:

<p id="wrap">
  <ul></ul>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</p>

以下は簡単なJSコードです:

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//声明元素块
//先创建一个随机数的函数
function ranDom(min,max){
  return Math.random()*(max-min+1)+min;
}
//再创建一个添加li的函数
function createLi(num){
  for(var i=0;i<num;i++){
    var newLi=document.createElement("li");//创建li
    newLi.style.height=ranDom(100,400)+"px";//使用随机数函数创建高度不同的li
    var arrul=[];
//将ul的高度进行储存和比较
    for(var j=0;j<ul.length;j++){
      arrul.push(ul[j].offsetHeight);//储存ul的高度
    }
    var minHeight=arrul[0];
    var minIndex=0;
    for(var k=0;k<arrul.length;k++){
      if(minHeight>arrul[k]){
        minHeight=arrul[k];//比较出高度最短的ul然后赋值给minHeight
        minIndex=k;//把高度最短的ul所在下标赋值给minIndex
      }
    }
  ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
  }  
}
createLi(15);//执行函数，添加15个li，
//创建一个滚动事件
window.onscroll=function(){ 
// html总高度-可视化窗口高度=body的滚动高度
//兼容写法 
  var scrollTop=document.body.scrollTop; 
  var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; 
  if(document.documentElement.offsetHeight-clientHeight<=scrollTop){ 
    createLi(15); 
  } 
}
//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的li

このようにして、フッターが表示されない自動読み込みウォーターフォール フロー レイアウトを実現しました。

IV.概要

簡単に言えば、ウォーターフォールフローは、ページコンテナ内で高さが異なる複数のコンテナの間に追加される不均一なコンテンツであり、マウスがスクロールすると、コンテナの最後尾にデータが常にロードされ、Go に自動的にロードされます。空の位置（この例では高さが最も低い位置）まで移動し、連続的にサイクルします。 ウォーターフォールフローは、画像を表示するのに効率的で魅力的です。ユーザーが一目でより多くの情報を取得できるクイックリーディングモードと、ウォーターフォールフローでの自動読み込みにより、ユーザーのマウスクリック操作が不要になります。

ウォーターフォールフローの主な特徴は、幅が固定されているが高さが固定されていないデザインにより、ページが視覚的な階層を巧みに使用し、ランダムな流れが緩和されることです。視覚疲労を和らげると同時に、人々に折衷的な感覚を与えます。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

ウォーターフォール フローとローディング効果の JavaScript 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。