ウォーターフォールコード実装(絶対位置決め)_html/css

ウォーターフォールコード実装(絶対位置決め)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:56:57

オリジナル

1399 人が閲覧しました

ウォーターフォールフローは、ページ表示において非常に一般的なレイアウト方法です。このレイアウトを使用すると、Web ページは非常に美しく見えます。滝の流れ要素の最大の特徴は、幅が等しく、高さが不等であることです。滝の流れを実現する方法を段階的に分析してみましょう。

1. まず、いくつかの画像を用意し、基本的な html+css コードを記述します (この手順は非常に簡単なので、コードを直接貼り付けます)。

初期ページ効果

pic1.png

Web ページの構造

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流</title><link rel="stylesheet" href="index.css"></head><body><div class="container">    <div class="box">        <div class="box-img">            <img src="img1.jpg" alt="pic1">        </div>    </div>    <div class="box">        <div class="box-img">            <img src="img2.jpg" alt="pic2">        </div>    </div>    <div class="box">        <div class="box-img">            <img src="img3.jpg" alt="pic3">        </div>    </div>    <div class="box">        <div class="box-img">            <img src="img4.jpg" alt="pic4">        </div>    </div>    <div class="box">        <div class="box-img">            <img src="img5.jpg" alt="pic5">        </div>    </div>    <div class="box">        <div class="box-img">            <img src="img6.jpg" alt="pic6">        </div>    </div></div></body></html>

ログイン後にコピー

css

*{margin: 0;padding: 0;}.container{position: relative;width: 1040px;margin: 0 auto;}.box{float: left;padding: 5px;font-size: 0;}.box-img img{width: 250px;}

ログイン後にコピー

2. ウォーターフォールフロー効果の実装

原理：1.根据所设的宽度，获得每一行可以放几列（我的列子中是写死的，一行放4列）；2.获取每个元素的高度，保存在数组中；3.从第一个元素依次设置每个元素的定位：   3.1 先获得这个元素该放在第几列（现有高度最小的列），通过下面的getMinHeightCol函数;   3.2 根据每列的宽以及每列的当前高度，设置元素的left,top值（当然也要设置position:absolute）;   3.3 重新修改每列的当前高度（为了3.1获得最新的“高度最小的列”）；

ログイン後にコピー

js コード (jquery に依存)

$(function(){    var elesHeight = [];//每个元素的宽度    var colsHeight = [0,0,0,0]; //每列元素现有的高度    $(".container .box").each(function(index,item){        var eleHeight = $(this).height();        elesHeight.push(eleHeight);    });    //依次摆放每一个元素    $(".container .box").each(function(index,item){        //获得该元素应该在第几列        var colShould = getMinHeightCol(colsHeight);        var tempTop = colsHeight[colShould];        var tempLeft = colShould*260;        $(this).css({"position":"absolute","top":tempTop+"px",left:tempLeft+"px"});        //同时将该列的高度加上当前新增元素的高度        colsHeight[colShould] += $(this).height();    });    //得到四列中高度最小的那一列    function getMinHeightCol(arr){        var minHeight = Math.min.apply(null, arr);        console.log("最小高度:"+minHeight);        for(var i in arr){            if(arr[i]==minHeight){                return i;            }        }        //默认第一列        return 0;    }});

ログイン後にコピー

ページ効果

pic2.png

上記は単純なウォーターフォールフローの実装であり、完全なウォーターフォールフローです次の機能も必要です:

ページの幅と各列の幅に基づいて列数が自動的に計算されます。
ウィンドウサイズが変更されると、位置が変更されます。要素のレイアウトが再計算されます。

解決策 - ウィンドウサイズが急速に変化すると、イベントが継続的にトリガーされ、大量のパフォーマンスの消費が発生します。

针对第三个问题的setTimeout解决方法：窗口变化之后开始计时，如果窗口还在变换则从新开始计时，窗口不再变化则延时（很短的时间）触发重排事件。var re;window.onresize = function() {  clearTimeout(re);  re = setTimeout(resize,100); };

ログイン後にコピー

残りの最適化を自分で試してみてください~