首頁 > web前端 > js教程 > JS實作瀑布流佈局的實例分析

JS實作瀑布流佈局的實例分析

黄舟
發布: 2017-10-23 09:49:54
原創
1504 人瀏覽過

本文實例為大家分享了JS實作瀑布流佈局展示的具體程式碼,供大家參考,具體內容如下

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

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>瀑布流布局</title>

  <script src="wallpoll.js"></script>

  <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" >

</head>

<body>

  <p id="main">

    <p class="box">

      <p class="pic">

        <img src="wallpoll/0.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/0.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/1.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/2.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/3.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/4.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/5.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/6.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/7.jpg" alt="">

      </p>

    </p>

 

    <p class="box">

      <p class="pic">

        <img src="wallpoll/8.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/9.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/10.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/11.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/12.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/13.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/14.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/15.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/16.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/17.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/18.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/19.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/20.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/21.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/22.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/23.jpg" alt="">

      </p>

    </p>

    <p class="box">

      <p class="pic">

        <img src="wallpoll/24.jpg" alt="">

      </p>

    </p>

  </p>

</body>

</html>

登入後複製

css部分


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

*{

  padding:0px;

  margin:0px;

}

.main{

  position:relative;

}

.box{

  padding:15px 0 0 10px;

  float:left;

}

.pic{

  padding:10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  box-shadow: 0 0 5px #ccc;

  /*float:left;*/

}

img{

  width:170px;

  height:auto;

}

登入後複製

JS部分


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

48

49

50

51

52

53

54

55

56

57

58

window.onload=function(){

  waterfall(&#39;main&#39;,&#39;box&#39;);

  var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}

  window.onscroll=function(){

    if(checkScrollSlide){

      for(var i=0;i<dataInt.data.length;i++){

        var oparent=document.getElementById("main");

        var box=document.createElement("p");

        box.className="box";

        oparent.appendChild(box);

        var pic=document.createElement("p");

        pic.className="pic";

        box.appendChild(pic);

        var img=document.createElement("img");

        img.src="wallpoll/"+dataInt.data[i].src;

        pic.appendChild(img);

      }

    }

    waterfall(&#39;main&#39;,&#39;box&#39;);

  }

}

function waterfall(parent,child){

  var oparent=document.getElementById(parent);

  var boxs=oparent.getElementsByClassName(child);

  var boxw=boxs[0].offsetWidth;

  var cols=Math.floor(document.documentElement.clientWidth/boxw);

  oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto";

  var harr=new Array();

  for(var i=0;i<boxs.length;i++){

    if(i<cols){

      harr.push(boxs[i].offsetHeight);

     }else{

      var minH=Math.min.apply(null,harr);

      var index=getMinhIndex(harr,minH);

      boxs[i].style.position="absolute";

      boxs[i].style.top=minH+"px";

      boxs[i].style.left=boxs[index].offsetLeft+"px";

      harr[index]+=boxs[i].offsetHeight;

    }

  }

}

function getMinhIndex(arr,val){

  for(var i in arr){

    if(arr[i]===val){

      return i;

    }

  }

}

function checkScrollSlide(){

  var oparent=document.getElementById("main");

  var boxs=oparent.getElementsByClassName("box");

  var lastBox=boxs[boxs.length-1];

  var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);

  var scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop;

  // console.log(scrollHeigth);

  var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth;

  return seeHeigth+scrollHeigth>height?true:false;

}

登入後複製

課程地址。

以上是JS實作瀑布流佈局的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板