Home > Web Front-end > JS Tutorial > Super simple implementation method of waterfall flow layout

Super simple implementation method of waterfall flow layout

小云云
Release: 2018-01-23 09:28:42
Original
1988 people have browsed it

This article mainly introduces an example of jquery implementing a super simple waterfall flow layout. The code is simple and easy to modify. Let's take a look with the editor below, I hope it can help everyone.

1. Look at the effect!

2.html code index.html


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!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>

Copy after login

3. Plug-in code


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

(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); 

Copy after login

4. Calling code


1

2

3

$(function () {

 $(&#39;.flowLayout-box li&#39;).flowLayout({});

 })

Copy after login

code Simple, easy to modify, just use it.

Related recommendations:

detailed explanation of jQuery Masonry waterfall flow layout

JS implementation of waterfall flow layout example

JS Example Analysis of Realizing Waterfall Flow Layout

Sharing Video Materials of Waterfall Flow Layout

Using JavaScript to Realize the Effect of Waterfall Flow Layout Code


The above is the detailed content of Super simple implementation method of waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template