Maison > interface Web > js tutoriel > Implémentation JS d'un exemple de disposition de flux en cascade

Implémentation JS d'un exemple de disposition de flux en cascade

小云云
Libérer: 2018-01-04 11:12:49
original
1437 Les gens l'ont consulté

Cet article présente principalement en détail l'implémentation JS de l'affichage des effets de disposition du flux en cascade. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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

Copier après la connexion

partie 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;

}

Copier après la connexion

partie 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;

}

Copier après la connexion

Recommandations associées :

Partage d'exemples de démonstration de flux de cascade ajax natif

Implémentation JS de Cascade Exemple d'analyse de la disposition du flux

Comment obtenir un effet de flux en cascade avec JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal