XZ_HTML5之实现瀑布流的3种方式

最新推荐文章于 2024-01-24 16:05:11 发布

Understand_XZ

最新推荐文章于 2024-01-24 16:05:11 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：瀑布流 CSS实现瀑布流 jQuery实现瀑布流 HTML5瀑布流瀑布流滚动加载

本文链接：https://blog.csdn.net/understand_XZ/article/details/77887097

HTML5 专栏收录该内容

19 篇文章

订阅专栏

瀑布流的特点是：1、等宽；2、高度不一样；2、每一个盒子相对于父标签定位；4、第二行第一个元素拼接到第一行最矮的盒子底下；

瀑布流的布局原理：子盒子相对于父盒子的一个定位，所以，先将第一行排列好，求出每个盒子的高度，如果是第一行的盒子，加入到数组中，如果是其他行的，遍历查找上一行的最矮盒子，把当前盒子相对于最矮盒子进行一下定位，然后更新数组最矮盒子的高度；

实现思路：每一个盒子，包含上边距和左边距，这样就省去计算图片与图片之间的间距了。这是比较简单一点的，如果需要在图片上添加赞或者购买等按钮或其他介绍信息的话，再当前的基础上再进行一些修改即可。

因为每个盒子都是等宽的，所以，布局的时候，只需要知道每个盒子距离浏览器的上边距和左边距是多少，左边距只需要当前盒子的索引 * 每个盒子的宽度即可，上边距就是最矮盒子的高度；

实现方式

1、用JS实现瀑布流布局

2、用CSS3

3、用jQuery

代码的地址

https://github.com/CoderXAndZ/WateFallFlow.git

方式一：JS实现瀑布流布局

js实现瀑布流布局代码：

// 实现瀑布流布局

function waterFall ( parent , child ) {

// 最需要的两个参数：父盒子和子盒子

// -----子盒子在父盒子中居中-----

// 获取屏幕宽度，然后除以图片宽度，得到图片的列数

// 1.1 拿到父盒子中所有的子盒子

var allbox = $(parent).getElementsByClassName(child);

// 1.2 求出盒子的宽度 202

var boxWidth = allbox[ 0 ].offsetWidth;

// 1.3 动态求出浏览器的宽度，包括边线的宽

var screenWidth = document .body.offsetWidth;

// 1.4 求出列数并取整

var columns = Math.floor(screenWidth / boxWidth);

// 1.5 让父标签居中

$(parent). style .width = boxWidth * columns + 'px' ;

$(parent). style .margin = '0 auto' ;

// ---- 子盒子定位 ----

// 1.1 高度数组

var heightArr = [];

// 1.2 遍历所有的盒子，将每个盒子的高度放在数组中

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

// 1.2.1 求出单个盒子的高度

var boxHeight = allbox[i].offsetHeight;

if (i < columns) {

// 取出第一行的盒子

heightArr.push(boxHeight);

} else {

// 需要定位的盒子

// 1.2.1 求出最矮盒子的高度

var minBoxHeight = Math.min.apply( this ,heightArr);

// 1.2.2 求出最矮盒子对应的索引

var minBoxIndex = getMinBoxIndex(minBoxHeight,heightArr);

// 1.2.3 盒子定位

allbox[i]. style . position = 'absolute' ;

allbox[i]. style .top = minBoxHeight + 'px' ;

allbox[i]. style .left = minBoxIndex * boxWidth + 'px' ;

// 1.2.4 更新数组中最矮盒子的高度

heightArr[minBoxIndex] += boxHeight;

}

console .log(heightArr);

}

// 取出数据中最矮盒子对应的索引

function getMinBoxIndex ( val , arr ) {

for ( var i in arr) {

if (val == arr[i]) return i;

}

实现瀑布流布局页面滚动加载的原理：

当（最后一个盒子高度的一半 + 头部偏离位置） > （浏览器的高度+页面偏离屏幕的高度）时，就加载下一页的数据，从最外层往里一层一层的创建盒子，将里层盒子加到外层盒子的里面，然后再将下一页的数据进行瀑布流布局；

// 滚动加载盒子

window . onscroll = function () {

// alert(0);

// 条件是否加载

if (checkWillLoad()) {

// 假数据

var data = { 'dataImg' : [{ 'img' : '1.jpg' },{ 'img' : '10.jpg' },{ 'img' : '13.jpg' },{ 'img' : '15.jpg' },{ 'img' : '17.jpg' },{ 'img' : '19.jpg' }]}

// 加载数据

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

// 创建最外面的盒子

var newBox = document .createElement( 'div' );

newBox.className = 'box' ;

// 拿到父盒子，并插入

$( 'main' ).appendChild(newBox);

// 创建里面的盒子

var newPic = document .createElement( 'div' );

newPic.className = 'pic' ;

// 插入到父盒子，

newBox.appendChild(newPic);

// 创建img

var newImg = document .createElement( 'img' );

newImg.src = 'imgs/' + data.dataImg[i].img;

newPic.appendChild(newImg);

}

// 瀑布流布局

waterFall( 'main' , 'box' );

}

实现的页面效果：

方式二：CSS实现瀑布流布局

css实现瀑布局布局的大致框架的一个代码，在最外层的div的css布局中写如下代码即可，这只能实现一个瀑布流布局：

# main {

/*多栏布局:设置栏宽*/

- webkit - column - width : 202 px;

- moz - column - width : 202 px;

column - width : 202 px;

}

方式三：jQuery实现瀑布流布局

jQuery实现瀑布流布局与CSS的不同在于，语言的的不同，思路都是一样的，只是js代码中换了一种写法

实现代码：

// 当页面加载完毕

$( window ).on( 'load' , function () {

// 1.实现瀑布流布局

waterFall();

// 2.实现滚动加载

$( window ).on( 'scroll' , function () {

// 判断是否加载

if (checkWillLoad()) {

// 造数据

var data = { 'dataImg' :[{ 'img' : '1.jpg' },{ 'img' : '10.jpg' },{ 'img' : '13.jpg' },{ 'img' : '15.jpg' },{ 'img' : '17.jpg' },{ 'img' : '19.jpg' }]};

// 遍历创建盒子,创建了一个div，设置类名为box，

$.each(data.dataImg, function ( index , value ) {

var newBox = $( '<div>' ).addClass( 'box' ).appendTo($( '#main' ));

var newPic = $( '<div>' ).addClass( 'pic' ).appendTo($(newBox));