効果：
1.JQは適応型ウォーターフォールフローを実現します
思考分析：
1.滝の流れの影響は、幅と高さが等しくありません。つまり、各要素の幅は同じです。
2. jsを介してページ幅の変化を監視し、各要素の幅を変更し、列数の変化を認識します。
3.滝の位置を達成するために、列の数から各要素の左と上の値を計算します;
4.各列の2番目の要素から始めて、高さを追加します。
コード：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
font-size: 0;
}
.img_item {
box-sizing: border-box;
border: 5px solid #fff;
}
.box {
position: relative;
height: 50px;
width: calc(100% - 40px);
margin: 20px;
}
</style>
<script src="code/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="waterfallFlowBOx box">
<img src="jsbase/瀑布流/picture/1.jpg" alt="" class="img_item">
//此处省略100个img标签
<img src="jsbase/瀑布流/picture/9.jpg" alt="" class="img_item">
</div>
</body>
<script type="text/javascript">
window.onload = function() {
(function(docs, win) {
waterfallFlow();
window.onresize = function() {
waterfallFlow();
}
})(document, window);
}
function waterfallFlow() {
var box = $(".img_item");
var value = $(".waterfallFlowBOx").outerWidth(); //获取父级的宽度
var deviceWidth = Math.max(750, value) //当父级宽度小于750时，
let cols = Math.floor(deviceWidth / 500);
$(".img_item").css("width", Math.ceil(value / cols) + "px");
var boxwidth = $(".img_item").outerWidth();
//创建数组
var heightArr = [];
//图片遍历循环，除第一 排不需要定位，取高度值其它排定位处理
box.each(function(index, item) {
//求出图片的高度
var itemheight = $(item).outerHeight();
//是不是第一 排
if (index < cols) {
heightArr[index] = itemheight;
$(item).css({
position: "absolute",
top: 0,
left: index * boxwidth + "px"
})
} else {
//最小图片的高度
var minitemheight = Math.min(...heightArr);
//最小的索引$. inArray()用于查找数组中指定值，返回索引( 未匹配返回-1)
// console.log(heightArr);
var minheightindex = $.inArray(minitemheight, heightArr)
// console.log(minheightindex)
$(item).css({
position: "absolute",
top: minitemheight + "px",
left: minheightindex * boxwidth + "px"
})
//高度追加
heightArr[minheightindex] += itemheight;
}
})
}
</script>
</html>滝の流れを実現するための2列の複数行レイアウト
思考分析：
ウォーターフォールフローのカラム実装は、主に2つの属性に依存しています。
1つはcolumn-count属性で、これは分割される列の数です。
1つは、列間の距離を設定するcolumn-gap属性です。
コード：
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.box {
column-gap: 10px;
}
.item {
margin-bottom: 5px;
}
.item img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="jsbase/瀑布流/picture/1.jpg" alt="" />
</div>
//标签省略
<div class="item">
<img src="jsbase/瀑布流/picture/8.jpg" alt="" />
</div>
</div>
<script type="text/javascript">
window.onload = function(){
(function(docs, win) {
htmlSize = function() {
var value = document.documentElement.clientWidth
var deviceWidth = Math.max(750, value);
document.querySelector(".box").style.columnCount = Math.floor(deviceWidth / 500);
};
htmlSize();
window.onresize = function(){
htmlSize();
}
})(document, window);
}
</script>
</body>
滝の流れを実現するための3つの柔軟なレイアウト
思考分析：
1.柔軟な垂直レイアウトを使用し、改行を許可します。
コード：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
flex-flow:column wrap;
height: 100vh;
overflow-y: scroll;
}
.item {
margin: 10px;
/* width: calc(100%/3 - 20px); */
}
.item img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="jsbase/瀑布流/picture/1.jpg" alt="" />
</div>
//...标签省略
<div class="item">
<img src="jsbase/瀑布流/picture/8.jpg" alt="" />
</div>
</div>
<script type="text/javascript">
window.onload = function() {
(function(docs, win) {
htmlSize = function() {
var value = document.documentElement.clientWidth
var deviceWidth = Math.max(750, value);
console.log(`calc(100% / ${Math.ceil(deviceWidth / 500)})`);
document.querySelector(".item").style.width = `calc(100% / ${Math.floor(deviceWidth / 500)})`;
};
htmlSize();
window.onresize = function() {
htmlSize();
}
})(document, window);
}
</script>
</body>4、コントラスト
1.要素の配置が異なり、左がJQ、右が後者の2つ、つまり1つの垂直行と1つの水平行であり、視覚効果は類似しています。
2.フレックスフレキシブルレイアウトは、滝の流れが左右にスクロールし、他の2つの方法が上下にスクロールしていることを認識します。
3.後者の2つは主にcssに依存しているため、要素が動的に生成された後、jsが要素ノードを取得できないという問題を心配する必要はありません。
4. JQは主流の美的基準に準拠しており、高い実用性を備えています。
