BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

画像のウォーターフォールレイアウトを実現するHTML+CSS+JSのサンプルコード

2022-01-21 16:37:33

プリアンブル

滝のレイアウトは、簡単に言えば、滝のレイアウトに似ているので、あなたは非常によく理解できないかもしれませんが、今私は一般的な例であなたを与える、さあ。

百度で写真を検索すると、Webページの写真のレイアウトがこうなっていると思うのですが、どうでしょう？あなたはまだ滝について明確ではない、その後、別のものを見てみましょう私は大丈夫です、淘宝網は、我々はそれをよりよく知っている必要があります！"。

画像内の商品ボックスの高さがそれぞれ違うので、商品画像の高さがレイアウトされていないことがわかります。Baiduで画像を検索すると、各画像の幅が異なることがわかりますので、なぜそれがちょうど行を埋める使用画像の幅がありますか？

これが今日お教えするレイアウト、ウォーターフォールレイアウトですが、では、それを実現するにはどうしたらいいのでしょうか。その後、我々は乾燥品に直接、あまり言わないでしょう

まず、全体の効果

ウォーターフォールビルドの完成効果は以下の通りです。

2、HTML＋CSSのシンプルなレイアウト

まず第一に、我々は、インターネット上でいくつかの写真を検索したり、お気に入りの写真を使用することができます、写真を格納するためにWebページの枠組みのための良いフレームワークを構築するためにHTMLを使用し、我々は例として、ここで20枚の写真を使用しています。次に、html + cssを使用して、シンプルなレイアウトを実現するために、そのレイアウトには 重要なステップは 上記のBaiduとTaobaoのページの滝のレイアウトを比較すると、滝を実現するには、すべての写真の高さか同じでなければならないことが簡単にわかります。そこで、使用する写真の幅を固定し、画像の高さを制限しないことで、各画像が元の比率で完全に表示されるようにします。

HTML、CSSのコードは以下の通りです。

cssコード 

*{
          margin: 0;
          padding: 0;
      }
      #container{
          position: relative;
      }
      .box{
          float: left;/* set each box holding photos as a float element, so that all images float to the first line of the page *          padding: 5px;
      }
      .box-img{
          width: 150px;
          padding: 5px;
          border: 1px solid #ccc;
          box-shadow: 0 0 5px #ccc;
          border-radius: 5px;
      }
      .box-img img {
          width: 100%;
          height: auto;
      }

htmlコード 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js waterfall</title>
 <link rel="stylesheet" href=". /index.css">
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="box-img">
        <img src=". /img/1.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/2.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/3.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/4.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/5.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/6.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/7.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/8.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/9.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src=". /img/10.jpg" alt="">
      </div>
    </div>
    <div class="box">
        <div class="box-img">
          <img src=". /img/1.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/2.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/3.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/4.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/5.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/6.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/7.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/8.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/9.jpg" alt="">
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <img src=". /img/10.jpg" alt="">
        </div>
      </div>
  </div>
  <script src=". /index.js"></script>
</body>
</html>

htmlとcssを修正したページはどのような感じですか？

我々は、各ボックスのfloatを使用します：左プロパティので、ページの先頭にドキュメントから画像が、あまりにも多くの画像の一部が2行目に圧迫されているとき、しかし、彼らは我々が滝の配置として想定していない、次にどのように我々はそれを実現するか、そして、我々のJSは便利になります。

三、その後のレイアウトを実現するJS

1行目以降の画像を各列にコンパクトに配置するためにjsで実装されています

コードは以下のコードです（詳細コメント付き）。 

window.onload = function() {
    imgLocation('container', 'box')
  }
  
  // Get the number of images to be placed
  function imgLocation(parent, content) {
    // take out all the content under containerd
    var cparent = document.getElementById(parent) // Get the label of the container box
    v

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します