坑人的瀑布流

最新推荐文章于 2021-06-03 06:41:16 发布

zuo_zuo_blog

最新推荐文章于 2021-06-03 06:41:16 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/90717083

Ajax 专栏收录该内容

18 篇文章

订阅专栏

博客提及了HTML、PHP和JS三种信息技术。HTML是前端页面构建基础，PHP常用于后端开发，JS则在前端交互等方面发挥重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

HTMl

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <title>JQuery 实现瀑布流</title>
        <style>
        body {
                text-align: center;
                margin: 0;
                padding: 0;
                background-color: #F7F7F7;
                font-family: '微软雅黑';
        }
        
        .wrapper {
                padding: 50px;
        }
        
        img {
                display: block;
                width: 100%;
                height: 300px;
        }
        
        .items {
                position: relative;
                /* display: flex; */
                /* 环函 */
                /* flex-wrap: wrap; */
        }
        
        .item {
                width: 228px;
                position: absolute;
        }
        
        .tips {
                width: 280px;
                height: 40px;
                margin: 30px auto 0;
                text-align: center;
                line-height: 40px;
                background-color: #CCC;
                border-radius: 6px;
                font-size: 24px;
                cursor: pointer;
        }
        
        .tips.loading {
                /* background-color: transparent; */
                background-color: hotpink;
        }
        </style>
     
</head>

<body>
        <h1>瀑布流 展示页面</h1>
        <div class="wrapper">
                <!-- items 作为 瀑布流的容器  瀑布流中的 元素的 宽度 是固定的 -->
                <div class="items">
                </div>
                <p class="tips loading" >正在加载...</p>
        </div>
</body>
</html>

<!-- 导入 要使用包 -->
<!-- jq -->
<script type="text/javascript" src='js/jquery.min.js'></script>
<!-- 模板引擎 -->
<script type="text/javascript" src='js/template-native.js'></script>

<!-- 自己的瀑布流插件 -->
<script type="text/javascript" src='js/jquery.waterfall.js'></script>

<!-- 定义模板 -->
<script type="text/template" id='template'>
<% for(var i=0;i<items.length;i++){%>
          <div class='item'>
                        <img src="<%=items[i].path%>" alt="">
                        <p><%=items[i].text%></p>
        </div>
<%}%>
</script>

<!-- 为按钮绑定点击事件 -->
<script type="text/javascript">
        $(function () {
                // 点击事件
                $('.tips').click(function () {
                        // 发送ajax请求
                        $.ajax({
                                url:'01.waterfall.php',
                                type:'get',
                                dataType:'json',
                                success:function(data){
                                        // 数组  转化为 js数组
                                        // console.log(data);

                                        // 包装为一个对象
                                        var backObj = {
                                                items:data
                                        };

                                        // 调用模板引擎 获取 生成的html
                                        var resultStr = template('template',backObj);

                                        console.log(resultStr); 

                                        // 添加到界面上
                                        $('.items').append(resultStr);

                                        // 直接调用 我们封装好的 瀑布流方法 即可完成布局
                                        // 需要导入 自己写的jq插件
                                        $('.items').waterfall();
                                }
                        })
                });
        })
</script>

PHP

<?php 
	// 读取json文件  string
	$jsonStr = file_get_contents('info/data.json');

	// 转化为 php数组 array
	$totalArr = json_decode($jsonStr);
	

	// 从数组中 随机获取 10个值 返回的 是一个 随机key 数组
	$randomKeys = array_rand($totalArr,10);

	// print_r($randomKeys);


	// 准备一个新的数组 php中的数组 长度 是可变的
	$newArr = array(); //长度为0

	// 使用 随机的key  去取 随机的值 count(数组) 可以获取 php中数组的长度
	for ($i=0; $i <count($randomKeys) ; $i++) { 
		// 获取 索引数组中的 每一个key
		$key = $randomKeys[$i];

		// 使用 key 从 总数组中 获取 key对应的值 对象
		$obj = $totalArr[$key];

		// 丢到一个 新的数组中
		$newArr[$i] = $obj;  //数组的长度 随着 我们索引值的更改 而改变
	}
	// 测试结果
	// print_r($newArr);
	
	// 将这10个值 转化为 json 格式字符串 发回给浏览器
	echo json_encode($newArr);

JS

// 添加插件
$.fn.extend({
	waterfall:function(){
		// console.log('我自己写的瀑布流插件');

		// 步骤1
		/*
			为了 计算 获取一些 必须知道的值
			容器的宽度 .items的 宽度
			子元素的宽度 .child().width()
			每一行放置的元素个数
			计算间距
		*/
		// 定义$_变量 方便 观察
		var  $_this = this;
		// 父盒子宽度
		var totalWidth =$_this.width();

		// 子元素宽度
		var itemWidth = $_this.children('.item').width();

		// 每一行的个数 4.1  4.9
		var colNum =Math.floor(totalWidth / itemWidth);

		// 间距 (总宽度 - 个数*子元素宽度)/(个数-1)
		var margin = (totalWidth - itemWidth*colNum)/(colNum-1);

		// 步骤2
		/*	1. 准备一个 数组 数组元素的个数 跟 每一行的个数一直
				里面是默认值(比如是10 或者是margin)
			2. 循环我们的 所有 .item 子元素
				获取子元素的高度
				通过我们在步骤1中定义的 数组 获取 最小的值
				根据获取的 最小索引值 计算top 以及left
			3.修改步骤1中定义的 数组 对应索引的值 即可
		*/

		// 步骤2.1 准备高度数组
		// 高度数组
		var heightArr = [];

		// 循环为 高度数组 赋值 初始值
		for (var i = 0; i < colNum; i++) {
			heightArr[i] = margin;
		}


		// 步骤 2.2 循环子元素 获取数组中最小的索引
			// 修改当前循环的元素的 top 以及 left值

		// jq中 循环数组的方法
		$_this.children('.item').each(function(index, element) {
			// console.log(index+'||'+element);

			// 获取 当前循环的 子元素高度
			var currentHeight = $(element).height();

			// 计算 该元素 放在哪个位置
			// 先 假设 索引为0的 是最小值
			var minIndex = 0;
			var minHeight =heightArr[0];
			for (var i = 0; i < heightArr.length; i++) {
				// 根 我们自己假设的 最小值 进行比较
				if (heightArr[i]<minHeight) {
					// 替换一下
					minHeight = heightArr[i];
					minIndex = i;
				}
			}

			// 循环完毕 最小的 高度 以及 最小的 索引值

			// 设置给 当前循环的 子元素 即可
			// top 高度为 计算出来的 最小高度
			// left 左间距为 宽度*索引 +索引*间距
			$(element).css({
				top:minHeight,
				left:minIndex*itemWidth+minIndex*margin
			});


			// 步骤2.3 修改 步骤1中 创建的 高度数组

			// 修改 minIndex 对应的值即可
			minHeight+=currentHeight; //加上自己的高度
			minHeight+=margin;//为了美观 把间距 加上去

			// 赋值给 高度数组即可
			heightArr[minIndex]=minHeight;

		});



		//步骤3 
		/*
			修改 父盒子的 高度 即可
			// 获取 高度数组中 最大的值

			// 修改父盒子的高度为 计算出来的 最大值即可
		*/
		//
		var maxHeight = heightArr[0];

		for (var i = 0; i < heightArr.length; i++) {
			if(heightArr[i]>maxHeight){
				// 将 更大的值 保存起来
				maxHeight = heightArr[i];
			}
		}

		// 循环完毕以后 最大值 就有了
		$_this.height(maxHeight);
	}
})