ホームページ > 記事 > ウェブフロントエンド > ウォーターフォールフローレイアウトの超簡単な実装方法

ウォーターフォールフローレイアウトの超簡単な実装方法

小云云オリジナル: 2018-01-23 09:28:421949ブラウズ

この記事では主にjqueryを使って超シンプルなウォーターフォールフローレイアウトを実装する例を紹介します。コードはシンプルで修正も簡単です。以下のエディターで見てみましょう。皆さんのお役に立てれば幸いです。

1. 効果を見てください!

2.html コードindex.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}
 li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; }
 img{width: 100%;height: auto;display: block;}
 </style>
 <script src="./jquery-1.12.4.min.js"></script>
</head>
<body style="background: #000">
 <ul class="flowLayout-box">
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u17.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
 </ul>
</body>
</html>

3. プラグインコード

(function ($) {
 $.fn.flowLayout = function(options) {
 var dft = {
 gapWidth:16, //间隙
 gapHeight:16, //间歇
 column:3 //列
 };
 var ops = $.extend(dft,options);
 var _this = $(this);
 _this.width((_this.parents(&#39;.flowLayout-box&#39;).width()-2*ops.gapWidth)/3)
 var _pWidth=_this.parents(&#39;.flowLayout-box&#39;).width();
 $(".flowLayout-box").css({
 &#39;opacity&#39;:0
 });
 var columnHeight=[],columnIndex=0;
 for (var i=0 ;i<ops.column;i++){
 columnHeight.push(0);
 }
 setTimeout(function () {
 for(var j =0 ; j< _this.length ;j++){
 console.log(columnHeight[columnIndex]);
 $(_this).eq(j).css({
 &#39;top&#39;:columnHeight[columnIndex]+ops.gapHeight+&#39;px&#39;,
 &#39;left&#39;:_pWidth*columnIndex/3+&#39;px&#39;
 })
 columnHeight[columnIndex]+=$(_this).eq(j).height()+ops.gapHeight
 columnIndex=getIndex();
 }
 },50)
 function getIndex() {
 var columnIndex=0,maxHeight=0;
 for(var i =0 ;i < columnHeight.length ;i++){
 if(columnHeight[i]<columnHeight[columnIndex]){
 columnIndex=i;
 }
 if(columnHeight[i]>maxHeight){
 maxHeight=columnHeight[i]
 }
 }
 $(".flowLayout-box").css({
 &#39;opacity&#39;:1,
 &#39;height&#39;:maxHeight
 });
 return columnIndex;
 }
 }
 })(jQuery);

4. コードの呼び出し

rreee

コードはシンプルで変更が簡単なので、それを使ってください。

ウォーターフォールフローレイアウトの超簡単な実装方法

関連記事