この記事の例は、参考のために JS ウォーターフォール フロー レイアウト学習教材を共有します。具体的な内容は次のとおりです。
特徴: 幅が等しく、高さが等しくない。
実装方法：JavaScript/Jquery/CSS3のマルチカラムレイアウト。
サンプルウェブサイト: Huaban.com --> 分類
1. ウォーターフォールフローを実現するための JS
index.html: ページ構造
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<link rel="stylesheet" href="styles/layout.css">
</head>
<body>
<div id="main">
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/0.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/1.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/2.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/3.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/4.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/5.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/6.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/7.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/8.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/9.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/10.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/11.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/12.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/13.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/14.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/15.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/16.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/17.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/18.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/19.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/20.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/21.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/22.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/23.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/24.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/25.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/26.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/27.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/28.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/29.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/30.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/31.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/32.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/33.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/34.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/35.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/36.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/37.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/38.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/39.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/40.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/41.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/42.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/43.jpg" class="lazy" alt=""></div></div>
</div>
<script src="scripts/waterfall.js"></script>
</body>
</html>layout.css: ページ要素のスタイル
*{
pdding:0;
margin:0;
}
div#main{
position: relative;
}
div.box{
padding:15px 0 0 15px;
float: left;
}
div.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
height:auto;
width:165px;
}waterfall.js
window.onload=function(){
waterFall('main','box');
//模拟后台相应数据json
var dataInt={
"data":
[
{"src":"0.jpg"},
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"}
]
}
window.onscroll=function(){
if(checkScrollSlide){
//将数据块渲染到当前页面的尾部
var oParent=document.getElementById("main");
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
var oPic=document.createElement("div");
oPic.className="pic";
oBox.appendChild(oPic);
var img=document.createElement("img");
img.setAttribute("src",dataInt.data[i]);
img.src="pic/"+dataInt.data[i].src;
oPic.appendChild(img);
}
dataInt=null;//清空数据块，防止无限加载
waterFall('main','box');//对页面新元素进行布局渲染
}
}
}
function waterFall(parent,box){
//将main下的class为box的所有元素取出来
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
console.log(oBoxs.length);
//计算整个页面显示的列数（页面宽/box宽）
var oBoxW=oBoxs[0].offsetWidth;
// console.log(oBoxW);
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
// console.log(cols);
//设置main的宽
oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;"
var hArr=[];//存放每列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);//获取当前数组最小高度值
// console.log(minH);
var index=getMinhIndex(hArr,minH);//获取数组最小高度的索引
//console.log(index);
oBoxs[i].style.position="absolute";//将之后的图片依次绝对定位
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=index*oBoxW+"px";//计算新图片所在的位置并赋值
hArr[index]+=oBoxs[i].offsetHeight;//变化数组列的高度值，因为加上了一张图片
}
//console.log(hArr);
}
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有class为box的元素
oElements=parent.getElementsByTagName("*");
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getMinhIndex(arr,val){
for(var i=0;i<arr.length;i++){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备滚动条加载数据块条件
function checkScrollSlide(){
var oParent=document.getElementById("main");
var oBoxs=getByClass(oParent,"box");
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//混杂模式和标准模式下的scrollTop获取
//console.log(scrollTop);
var height=document.body.clientHeight||document.documentElement.clientHeight;//混杂模式和标准模式下的浏览器窗口高度获取
return (lastBoxH<scrollTop+height)?true:false;//检测最后一个box高度是否小于滚动高度+窗口高度，返回布尔值
}2 . JQuery
$( window ).on( "load", function(){
waterfall('main','pin');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.onscroll=function(){
if(checkscrollside()){
$.each( dataInt.data, function( index, value ){
var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );
var $oBox = $('<div>').addClass('box').appendTo( $oPin );
$('<img alt="JS ウォーターフォール フロー レイアウトの詳細については、こちらをご覧ください。" >').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
});
waterfall();
};
}
});
/*
parend 父级id
pin 元素id
*/
function waterfall(parent,pin){
var $aPin = $( "#main>div" );
var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
//oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
$( "#main" ).css({
'width:' : iPinW * num,
'margin': '0 auto'
});
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
$aPin.each( function( index, value ){
var pinH = $aPin.eq( index ).height();
if( index < num ){
pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$( value ).css({
'position': 'absolute',
'top': minH + 15,
'left': $aPin.eq( minHIndex ).position().left
});
//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
}
});
}
function checkscrollside(){
var $aPin = $( "#main>div" );
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop = $( window ).scrollTop()//注意解决兼容性
var documentH = $( document ).height();//页面高度
return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
}3. CSS の複数列レイアウト
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
/*数据块 砖块*/
.container div{width:160px;
margin:4px 0;}【css3 と js の実装方法の比較】
--css3 の方法--
1: 計算不要、1 列幅を設定するだけ、高パフォーマンス
2: 列の幅がブラウザの幅に応じて変化し、ユーザーエクスペリエンスが良くありません
3: 画像が縦方向に並べ替えられ、画像の表示順序が崩れます
4. 画像の読み込みには依然として js が必要です
- -js メソッド--
js で実装されたウォーターフォール フローには上記の欠点はありませんが、パフォーマンスは比較的悪いです。
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
JS ウォーターフォール フロー レイアウトの詳細な研究に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AMこの記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AMJavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
