ウォーターフォールフローは、現在人気のあるウェブサイトインターフェイスのレイアウト方法であり、不均一な複数列のレイアウトと下部に到達したときの自動読み込みにより、ウェブサイトの視覚的およびユーザーエクスペリエンスが大幅に向上します。このレイアウトを最初に使用したのは、海外の写真 Web サイトである Pinterest でした。その後、Huaban.com、写真コミュニティの Lofter、Meilishuo、Mogujie など、いくつかの国内の写真 Web サイトも滝の流れのレイアウトを使用し始めました。ピンタレスト。
滝の流れのレイアウトは、ほとんどの人にとって非常にシンプルで、列が数本しかないはずです。ウォーターフォール フローで最も重要なことは、データの非同期読み込みです。
まず、この例で使用されているウォーターフォール フロー手法について説明します。ウォーターフォール フロー レイアウトの実装方法については、Baidu で検索していただければさまざまな方法があるため、ここでは詳しく説明しません。この記事でのウォーターフォールフローの実装方法は4カラムレイアウト(li*4)で、各ピクチャはボックス(div>img+p)となっており、背景からデータを読み込んでから要素に割り当てます。ボックスを使用して、現時点で最も高さが小さい列 (li) を決定し、対応する列 (li) にボックスを追加して、次の判断を行います。このページ上のすべてのデータがロードされるまで、これが繰り返されます。
コード部分:
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 div{
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>
javascript部分: ajax部分と実装部分
/**
*
* @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);
}
}
}
}ajax部分は、以前に書かれたAjaxの動作原理と関数の単純なカプセル化から変更されています。その後、基本的にこれを見るのは難しくありません。それと比較して、これにはデータ パラメーターが 1 つ増えています。データは、データの読み取りに使用されるページ番号です。
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);
//将数据写入到div中
for(var i = 0; i < data.length; i++) {
var index = getShort(li);//查找最短的li
//创建新的节点：div>img+p
var div = document.createElement('div');
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";
div.appendChild(img);
var p = document.createElement('p');
p.innerHTML = data[i].title;//p获取图片标题
div.appendChild(p);
//加入到最短的li中
li[index].appendChild(div);
}
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;
} この部分の機能は主に、生成された div をページに動的に書き込むことであり、これにはボックスのスタイルの変更とデータの書き込みが含まれます。データは ajax 関数を通じてサーバーから取得されます。
このインスタンスの動作はサーバーに依存するため、簡単なサーバーをローカルに構築する必要があることに注意してください。
以下は私たちのデータソースの PHP コードです:
<?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;
?>以上がこの記事の全内容です。皆様の学習に役立つことを願っております。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。
ウォーターフォール フロー レイアウトの AJAX 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ドリームウィーバー CS6
ビジュアル Web 開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
