How to use AJAX to implement waterfall flow
This time I will show you how to use AJAX to implement waterfall flow, and what are the precautions for using AJAX to implement waterfall flow. The following is a practical case, let's take a look.
Waterfall flow is currently a popular website interface layout method. The uneven multi-column layout and the way of reaching the bottomautomatic loading make the website visually and user-friendly. can be greatly improved. The first person to use this layout was Pinterest, a foreign picture website. Later, some domestic picture websites also began to use waterfall flow layout, including Huaban.com, picture community Lofter, Meilishuo, Mogujie, etc., which are similar to Pinterest. .
The layout of waterfall flow should be very simple for most people, with only a few columns. The most important thing about waterfall flow is asynchronous loading of data. First let’s talk about the waterfall flow method used in this example. There are many ways to implement waterfall flow layout. For details, you can search on Baidu yourself, so I won’t go into details here. The implementation method of waterfall flow in this article is a four-column layout (li*4). Each picture is a box (p>img+p). After reading the data from the background, it is assigned to the elements in the box to determine the column with the smallest height at this time. (li), then add the box to the corresponding column (li), and then make the next judgment, and so on until all data on this page is loaded.Code part:
html+css<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 1200px;
margin: 0 auto;
}
ul li{
float: left;
width: 250px;
list-style: none;
margin: 20px;
}
ul li p{
width: 250px;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 2px 2px 10px #919B9C;
}
ul li img{
width: 100%;
margin-bottom: 10px;
}
ul li p{
font-family: "microsoft yahei";
font-size: 14px;
}
</style>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="pubuliu.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>/**
*
* @param {Object} method get和post方式
* @param {Object} url 文件路径
* @param {Object} data 页码
* @param {Object} success 成功的函数
*/
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
console.log(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}window.onload = function() {
//获取界面节点
var ul = document.getElementById('ul1');
var li = document.getElementsByTagName('li');
var liLen = li.length;
var page = 1;
var bool = false;
//调用接口获取数据
loadPage();//首次加载
/**
* 加载页面的函数
*/
function loadPage(){
ajax('get', 'getPics.php', 'cpage='+page, function(data) {
//将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式
var data = JSON.parse(data);
//将数据写入到p中
for(var i = 0; i < data.length; i++) {
var index = getShort(li);//查找最短的li
//创建新的节点：p>img+p
var p = document.createElement('p');
var img = document.createElement('img');
img.src = data[i].preview;//img获取图片地址
img.alt = "等着吧..."
//根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断
img.style.height = data[i].height * (230 / data[i].width) + "px";
p.appendChild(img);
var p = document.createElement('p');
p.innerHTML = data[i].title;//p获取图片标题
p.appendChild(p);
//加入到最短的li中
li[index].appendChild(p);
}
bool = true;//加载完成设置开关，用于后面判断是否加载下一页
});
}
window.onscroll = function (){
var index = getShort(li);
var minLi = li[index];
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){
//开关为开，即上一页加载完成，才能开始加载
if(bool){
bool = false;
page++;
loadPage();
}
}
}
}
/**
* 获取数组中高度最小的索引
* @param {Object} li 数组
*/
function getShort(li) {
var index = 0;
var liHeight = li[index].offsetHeight;
for(var i = 0; i < li.length; i++) {
if(li[i].offsetHeight < liHeight) {
index = i;
liHeight = li[i].offsetHeight;
}
}
return index;
}<?php
header('Content-type:text/html; charset="utf-8"');
/*
API:
getPics.php
参数
cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;
$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;
$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);
echo $content;Ajax+PHP data interaction implementation
The above is the detailed content of How to use AJAX to implement waterfall flow. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement dual WeChat login on Huawei mobile phones?
Mar 24, 2024 am 11:27 AM
How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously
PHP Programming Guide: Methods to Implement Fibonacci Sequence
Mar 20, 2024 pm 04:54 PM
The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence
How to implement the WeChat clone function on Huawei mobile phones
Mar 24, 2024 pm 06:03 PM
How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
How to implement exact division operation in Golang
Feb 20, 2024 pm 10:51 PM
Implementing exact division operations in Golang is a common need, especially in scenarios involving financial calculations or other scenarios that require high-precision calculations. Golang's built-in division operator "/" is calculated for floating point numbers, and sometimes there is a problem of precision loss. In order to solve this problem, we can use third-party libraries or custom functions to implement exact division operations. A common approach is to use the Rat type from the math/big package, which provides a representation of fractions and can be used to implement exact division operations.
Master how Golang enables game development possibilities
Mar 16, 2024 pm 12:57 PM
In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.
How to solve the problem of jQuery AJAX error 403?
Feb 23, 2024 pm 04:27 PM
How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make
PHP Game Requirements Implementation Guide
Mar 11, 2024 am 08:45 AM
PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these
