效果:
一、JQ实现自适应瀑布流
思路分析:
1.瀑布流效果就是等宽不等高,即每个元素的宽度是一样的;
2.通过js监听页面宽度变化,改变每个元素的宽,实现列数变化;
3.通过列数,计算给该给每个元素的left,top值,实现瀑布流定位;
4.从每列第二个元素开始,追加高度。
代码实现:
<!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>
二、column 多行布局实现瀑布流
思路分析:
column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性,是分为多少列。
一个是 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>
三、flex 弹性布局实现瀑布流
思路分析:
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>
四、对比
1.元素排列方式不一样,左边是JQ,右边是后面两种,即一个竖排,一个横排,视觉效果是差不多的;
2.flex 弹性布局实现瀑布流是左右滚动,另外两种方式是上下滚动;
3.后面两种主要是依赖css,所以不用担心元素动态生成后js获取不到元素节点问题;
4.JQ符合主流审美规范,实用性强。