纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果，初步实现一个基本的瀑布流布局，以及滚动到底部后模拟ajax数据加载新图片功能。

缺点：

1. 程序不是响应式，不能实时调整页面宽度；

2. 程序中当新增ajax模拟数据图片后，是将整个页面的所有图片都重新定位一次。

3. 程序是等所有图片加载完成后再读取图片的尺寸，实际中肯定不能这样做。

4. 实际项目中，应该由后台程序给出图片尺寸值，在js代码中直接使用图片的width属性。

本程序思路：

html结构：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<body>

  <div id="container">

    <div class="box">

      <div class="box_img">

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

      </div>

    </div>

    <div class="box">

      <div class="box_img">

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

      </div>

    </div>

    ...

  </div>

</body>

一、初始化布局

1. 设置#container为position:relative;

2. 设置.box为float:left;

3. 网页加载后对所有图片进行定位;

　　3.1 图片宽度是固定的，计算出当前页面每行能容纳的图片数num，并得出#container的宽度，然后设置页面居中；

　　3.2 循环遍历所有图片，前num个图片默认float布局作为第一行，并存入数组BoxHeightArr = [];

　　3.3 第一行布局完成后，排布下一个图片，并更新BoxHeightArr[]：

　　　　3.3.1 将下一个图片放到第一行最矮图片的下方（用position:absolute定位），也就是BoxHeightArr[]中高度最小的那一列，记录下列数的索引值：minIndex;

　　　　3.3.2 更新BoxHeightArr[]中最小的那个值（BoxHeightArr[minIndex]+当前图片的高度）;

　　3.4 重复循环3.3步骤，直到所有图片都排布完成

二、实时监测滚动高度，是否要加载新数据

1.初始化完成后得到最后一个图片距离顶部的高度： lastContentHeight

2.用window.onscroll = function(){...}

　　实时监测当前页面的滚动高度为：scrollTop

　　实时监测当前页面视窗高度为：pageHeight

3. 当页面监测到：lastContentHeight < scrollTop + pageHeight 时，用ajax获取新增图片的json数据。

三、页面底部新增内容

1. 用一个循环，先创建一个新的图片容器，添加到底部，然后将json数据中相应的图片数据如路径等信息写入该容器完成添加图片。

2. 所有新增图片添加完成后，对整个页面的所有图片及布局重新执行步骤一的初始化操作。

项目文件夹：

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

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

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <link rel="stylesheet" type="text/css" href="css/style.css"/>

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

  <title>JavaScript瀑布流</title>

 </head>

 <body>

  <div id="container">

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

    

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

    

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

   <div class="box">

    <div class="box_img">

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

    </div>

   </div>

  </div>

 </body>

</html>

style.css:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

*{

 margin: 0;

 padding: 0;

}

#container{

 position: relative;

}

.box{

 padding: 5px;

 float: left;

}

.box_img{

 padding: 5px;

 border: 1px solid #ccc;

 box-shadow: 0 0 5px #ccc;

 border-radius: 5px;

}

.box_img img{

 width: 150px;

 height: auto;

}

app.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

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

window.onload = function(){

 imgLocation("container", "box");

 //ajax模拟数据

 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}

  

 window.onscroll = function(){

  if(checkFlag()){ //判断是否到底部要加载新的数据

   var cparent = document.getElementById("container");

   //把ajax数据加载进页面

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

    var ccontent = document.createElement("div");

    ccontent.className="box";

    cparent.appendChild(ccontent);

    var boximg = document.createElement("div");

    boximg.className = "box_img";

    ccontent.appendChild(boximg);

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

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

    boximg.appendChild(img);

   }

   //把所有图片数据重新定位一次

   imgLocation("container", "box");

  }

 }

};

 

function checkFlag(){

 var cparent = document.getElementById("container");

 var ccontent = getChildElement(cparent, "box");

  

 //得到最后一张图距顶部的高度，滚动高度，窗口高度

 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;

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

 var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;

 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);

  

 if(lastContentHeight < scrollTop + pageHeight){

  return true;

 }

}

 

function imgLocation(parent, content){

 //将parent下所有的content全部取出

 var cparent = document.getElementById(parent);

 var ccontent = getChildElement(cparent, content);

 //根据当前浏览器窗口的宽度，确定每行图片数并固定，居中

 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border

 var num = Math.floor(document.documentElement.clientWidth / imgWidth);

 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";

 //alert("pause");

 //设置一个数组，用来承载第一行的图片信息

 var BoxHeightArr = [];

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

  if(i<num){

   //第一行的图片的高度记录下来

   BoxHeightArr[i] = ccontent[i].offsetHeight;

   //当ajax数据加载后，程序是将所有图片重新定位，所以第一行的图片要清除position:absolute

   ccontent[i].style.position = "static";

  }else{

   var minHeight = Math.min.apply(null, BoxHeightArr);

   var minIndex = getminheightLocation(BoxHeightArr, minHeight);

    

   //把图放在第一行图索引值最小的下面

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

   ccontent[i].style.top = minHeight+"px";

   ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";

    

   //图片放好位置后更新“第一行图片信息的最小高度”，

   //然后利用for循环重复这个动作到结束

   BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;

  }

 }

;}

 

//获取第一行图片高度最小的索引值

function getminheightLocation(BoxHeightArr, minHeight){

 for(var i in BoxHeightArr){

  if(BoxHeightArr[i] == minHeight){

   return i;

  }

 }

}

 

//获取所有box

function getChildElement(parent, content){

 contentArr = parent.getElementsByClassName(content);

 return contentArr;

}
时间： 2024-10-12 06:49:53

纯js实现瀑布流布局及ajax动态新增数据的相关文章

JavaScript——基本的瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="

纯css3打造瀑布流布局

纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: avoid; 避免元素内部断行并产生新列 注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性. 进阶参考: 原理: http://www.zhangxinxu.com/wordpress/?p=2308 效果:http://www.zhan

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台

setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么会出现这种情况呢?怎么能让我跳转到其他页面之后定时任务不执行呢? yj327243832 | 浏览 1987 次  2014-08-22 17:26 2014-08-23 11:03 最佳答案 个人感觉如果A页面已经跳转到其他页面,那么那个定时器的请求应该不会再被执行,因为A页面在浏览器中应该已经被

关于 ajax 动态返回数据 css 以及 js 失效问题

ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function loadjscssfile(filename, filetype) { if (filetype == "js") { //判定文件类型 var fileref = document.createElement('script')//创建标签 fileref.setAttribute(&q

原生JS实现瀑布流布局

一.瀑布流之准备工作   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿. 二.代码的准备工作  我们打开开发工具, 先建个html工程, 在内部写下如下代码, 因为是准备工作, 所以刚开始写的都是一些基础性的东西, 就不一一解释了, 直接上代码

js实现瀑布流布局

window.onload = function () { var d1 = new Waterfall(); d1.init();};//构造函数function Waterfall() { this.oColNum =null;//显示列数 this.oData = null; //存储请求数据 this.settings ={ width:300, autoLoad:true }}//初始化方法Waterfall.prototype.init = function (opt) { exte

Jquery chosen动态设置值 select Ajax动态载入数据 设置chosen和获取他们选中的值

? 在做一个编辑对话框时,要对里面带有select option的操作.主要是想动态载入option和对option的选中.可是由于项目中使用了jquery里的chosen()方法.怎么也无法实现效果.原码例如以下: ? ? Java代码 ? <select?id="viewOLanguage"?data-rel="chosen">?? ????<option?value="zh">中文简体(中文简体?Chinese)&l

用js 向h5 中的table 动态添加数据 （简单实现）

//向 表格传值 function setTextareaValue(items,pp){ console.log(" 进入函数 items=="+items); var tb = document.getElementById("addtable"); var td1 = tb.rows[1].cells[1]; var td2 = tb.rows[1].cells[2]; var td3 = tb.rows[1].cells[3]; var td4 = tb.r