HTML と CSS を使用してウォーターフォール フローの商品表示レイアウトを実装する方法

HTML と CSS を使用してウォーターフォール フローの製品表示レイアウトを実装する方法

ウォーターフォール フロー レイアウトは一般的な Web デザイン手法であり、よく組織化され、ダイナミックなプレゼンテーション、連続的な視覚効果。商品表示Webページにウォーターフォールフローレイアウトを適用すると、商品の表示効果が向上し、ユーザーの注目を集めることができます。この記事では、HTML と CSS を使用してウォーターフォール フローの商品表示レイアウトを実装する方法と、具体的なコード例を紹介します。

1. HTML 構造

まず、コンテナ要素に基づいて、製品表示領域をラップする基本的な HTML 構造を構築する必要があります。

 
  
商品标题1
 
商品描述1
 
 
  
商品标题2
 
商品描述2
 
 ... 

上記のコードでは、containerという名前の div 要素をコンテナ全体として使用し、その中に複数のitem要素がネストされています。要素は商品の表示ブロックを表します。item要素では、画像、タイトル、説明などの関連コンテンツを挿入できます。

.container { column-count: 3; column-gap: 20px; } .item { display: inline-block; width: 100%; margin-bottom: 20px; } .item img { width: 100%; } .item h3 { margin-top: 10px; font-size: 16px; } .item p { margin-top: 5px; font-size: 14px; }

containerコンテナをcolumn-count属性によって 3 つの列に分割します (列の数は、実際の状況)、column-gapを使用します。このプロパティは列間の間隔を設定します。

item要素については、水平方向に配置するためにdisplay: inline-blockに設定し、幅を 100% に設定して、各item要素は列全体を埋めることができます。margin-bottom属性を設定することで、item要素間の垂直方向の間隔を設定することもできます。

item要素内の画像、タイトル、説明、その他のコンテンツについては、実際のニーズに応じて幅、フォント サイズ、その他のスタイルを設定し、ウォーターフォール フローのレイアウト効果に適応させます。 。

window.addEventListener('scroll', function() { var container = document.querySelector('.container'); var lastItem = container.lastElementChild; var lastItemOffset = lastItem.offsetTop + lastItem.clientHeight; var pageOffset = window.pageYOffset + window.innerHeight; if (pageOffset > lastItemOffset) { // 加载更多商品展示块的代码 // 可以通过 AJAX 请求获取更多商品数据并插入到 container 中 } });

pageOffset > lastItemOffset条件が満たされたとき、さらに製品ディスプレイをロードできるコードのブロック。実際のアプリケーションでは、AJAX リクエストを通じてさらに多くの製品データを取得し、新しい製品表示ブロックをコンテナcontainerに挿入できます。

以上がHTML と CSS を使用してウォーターフォール フローの商品表示レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。