通过ajax带布局,JS通过ajax+多列布局+自动加载实现瀑布流效果.pdf

JS通通过过ajax + 多多列列布布局局 + 自自动动加加载载实实现现瀑瀑布布流流效效果果

Ajax

•说明：本文效果是无限加载的，意思就是你一 滚动就会一 加载图片出现，通过鼠标滚动距离来判断的，所以不是说的那种

加载一次就停了的那种，那种demo下次我会再做一次

css部分用的是html5+css3的新属性，图片会自动添加到每行的最顶端上去，而不是用j s去判断。去除了一些j s计算的麻烦。

css部分：

1 * {

2 margin: 0;

3 padding: 0;

4 box-sizing: border-box;

5 }

6 bod {

7 background: #352323 url(images/a.png);

8 }

9 img {

10 displa : block;

11 }

12 section {

13 max-width: 95%;

14 margin: 0 auto;

15 overflow : hidden;

16 column-count: 5;

17 column-gap: 0;

18 column-fill: auto;

19 }

20 figure {

21 border: 2px solid pink;

22 margin: 0 5px 10px;

23 break-inside: avoid;

24 padding: 5px;

25 }

26 figure img {

27 width: 100%;

28 }

29 figcaption {

30 padding: 10px 0;

31 text-align: center;

32 font-weight: 900;

33 color: #a77869;

34 }

html部部分分：：

通过j s插入节点，因为后台不知道多少张图片

1

2

6

j s有两个部分，一个是我封装的aj ax 函数，和一些判断函数

第第一一部部分分

1 window.onload = function() {

2 var section = document.getElementsB TagName('section')[0];

3 //运行ajax函数；

4 ajax('get ', 'active.php', 'num=10 ', function(data) {

5 //解析json对象

6 let img_data = JSON.parse(data);

7 console.log(img_data);

8 //循环建多少图片配多少标签

9 for (let i = 0; i < img_data.length; i++) {

10 //建立figure标签

11 let figure = document.createElement('figure');

12 //创建两个子元素img和figcaption，并赋值

13 let img = document.createElement('img ');

14 img.src =