瀑布流效果

最新推荐文章于 2019-12-31 17:51:27 发布

tianshizhimeng155

最新推荐文章于 2019-12-31 17:51:27 发布

阅读量716

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u013267266/article/details/51829924

版权

本文介绍了如何实现瀑布流布局，通过设置固定列宽并动态插入元素到最短列中。当滚动条滚动时，判断最短列是否进入可视区以决定是否加载更多内容。同时提到了图片预加载和后端提供图片宽高的解决方案，以解决图片未加载完全导致的瀑布流效果缺失问题。示例代码使用JavaScript和PHP进行实现。

摘要由CSDN通过智能技术生成

原理：先固定一行有多少列，一列的宽度固定，然后后面的向上一行中高度最短的那列插入，直到所有的数据插入完

没有瀑布流效果原因：

图片没有加载完成，图片没有撑起来

For循环改为递归图片预加载

或者

后端传过来当前图片的宽高

本文选择后者

滚动条滚动是判断最短一列li是否进可视区

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iLen = aLi.length;
console.log(iLen);
var iPage = 1;
var b = true;

//初始化数据处理
getList();
//先找到最短一列li
function getList() {