- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="format-detection" content="telephone=no">
- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
- <meta http-equiv="Expires" content="0">
- <meta http-equiv="Cache-Control" content="no-cache">
- </head>
- <body>
- <!--
- 两列瀑布流显示
- 思路
- 把每列的高度做比较
- 步骤
- 1. 先把图片数据异步获取的, setTimeout 进行模拟获取.
- 2. 把获取到的图片, 先等资源加载完.
- 3. 进行显示一张, 递归进行再显示一张 (这边应该还可以优化)
- 4. 模拟滚动加载.
- -->
- <div class="left"></div>
- <div class="right"></div>
- <style>
- .left,.right{
- width:50%;
- }
- .left{
- float:left;
- }
- .right{
- float:right;
- }
- p{
- overflow: auto;
- text-align: center;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- width: 95%;
- break-inside: avoid;
- box-sizing: border-box;
- }
- img{
- width:100%;
- }
- </style>
- <script>
- /**
- * 全局变量
- * */
- var imgs = [
- '',
- 'http://img5.duitang.com/uploads/item/201411/07/20141107164412_v284V.jpeg',
- 'http://wx4.sinaimg.cn/large/006WfoFPly1fq0jo9svnaj30dw0dwdhv.jpg',
- 'http://img4.duitang.com/uploads/item/201407/14/20140714234214_4w8hR.jpeg',
- 'http://img3.imgtn.bdimg.com/it/u=3077900768,3740996753&fm=11&gp=0.jpg',
- 'http://pic2.zhimg.com/v2-f429c56fa194407db5da50259fc117d5_b.jpg'
- ];
- var l_height = 0;// 左边高度
- var r_height = 0;// 右边高度
- var arr = [];// 存储异步数据的内容
- var isload = true;// 滑动是否加载
- // 元素标签
- var ele_left = document.getElementsByClassName('left')[0];
- var ele_right = document.getElementsByClassName('right')[0];
- /**
- * 获取 1-5 随机数
- * */
- function getRandNum(){
- return Math.floor(Math.random()*5+1);
- }
- /**
- * 获取图片数据
- * */
- function loadMore(){
- setTimeout(()=>{
- t = 0;// 全局变量
- for(var i=0;i<10;i++){
- arr.push(getRandNum());
- }
- show();
- },300);
- }
- /**
- * dom 操作显示
- * */
- function show(){
- if(t==10)return isload = true;
- var img = document.createElement('img');
- img.src = imgs[arr[t]];
- img.onload = function(p){
- t++;
- var p = document.createElement('p');
- p.appendChild(this);
- if(ele_left.offsetHeight> ele_right.offsetHeight){
- ele_right.appendChild(p);
- }else{
- ele_left.appendChild(p);
- }
- show();
- }
- }
- /**
- * 滑动加载
- * */
- Windows.onscroll=function(){
- if(
- isload &&
- (
- (document.body.scrollHeight - Windows.screen.availHeight-document.getElementsByTagName('html')[0].scrollTop<100 )
- ||
- (document.body.scrollHeight - Windows.screen.availHeight-document.body.scrollTop<100 )
- )
- ){
- isload = false;// 正在进行加载. 不需要重复加载
- loadMore();
- }
- };
- // 首次执行
- (function(){
- loadMore();
- })();
- </script>
- </body>
- </HTML>
原创, 菜鸟代码, 见谅!
来源: http://www.bubuko.com/infodetail-2931183.html