瀑布流 | 易学教程

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

阅读更多关于 vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

一、思路分析和效果图　　用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路：根据加载数据的顺序，依次追加标签展示效果；选择哪种方式实现瀑布流，这里选择绝对定位方式；关键问题：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一致，高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下，每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度，是解决问题的关键点！这里选择用JS中的Image类，通过预加载图片的方式提前获取图片宽高，另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后，开始渲染页面。页面渲染后，获取所有图片所在的盒子，循环计算盒子的高度，开始设置每个盒子item的绝对定位。页面渲染时，会出现闪烁的现象。如何解决这个问题呢？这里用了一个动画样式。不过在第一次加载的时候，还是会有一点闪烁的感觉。然后就是下拉刷新和上拉加载更多的效果，这里用了有赞的vant组件PullRefresh和List这套组合组件来实现。先看个效果动图：静态截图：二、具体实现步骤 2.1、页面结构设计，测试数据准备。　　本地准备一个json文件数据，放在项目public文件夹下。注意，本地测试数据必须放在public文件夹下

用js实现瀑布流

阅读更多关于用js实现瀑布流

瀑布流就是图片的一种呈现方式，适合条件 1、图片较多 2、网页较长 3、网页中的图片宽度一定，但是长度不一定下面介绍一下的实现过程， 1、确定布局。即四列的弹性布局当然这个可以改 2、加载图片 3、计算最小列 4、在最小列的后面插入图片 5、实现滚动加载；利用最后的滚动监听事件源码： < ! DOCTYPE html > < html > < head > < meta charset = "utf-8" / > < title > < / title > < style > body { background : #dedede ; margin : 0 ; padding : 0 ; } . pubu - container { width : 70 % ; margin : 0 auto ; /*弹性布局*/ display : flex ; /*方向*/ flex - direction : row ; /* 可以理解成float:left. */ } . pubu - container > . item { flex : 1 /*弹性项的占比，就是这四列都站一份就是四分之一*/ ; margin : 17 px ; /*设置间距*/ } . pubu - container > . item > img { width : 100 % ; /

用JS原生写瀑布流

阅读更多关于用JS原生写瀑布流

效果图 html <!DOCTYPE html> < html > < head > < meta charset = " UTF-8 " > < title > Document </ title > < style > * { margin : 0 ; padding : 0 ; } .container { width : 840px ; background : #cccccc ; margin : auto ; padding-left : 10px ; overflow : hidden ; } .container ul { width : 200px ; margin-right : 10px ; float : left ; list-style : none ; } .container ul li { width : 200px ; position : relative ; background : white ; margin-top : 10px ; } .container ul li img { width : 100% ; height : 90% ; background : url("./images/timg.gif") no-repeat center ; } .container ul li p { height : 30px ;

利用JS实现简单的瀑布流效果

阅读更多关于利用JS实现简单的瀑布流效果

　　哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作　　首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿. 二.代码的准备工作　　我们打开开发工具, 先建个html工程, 在内部写下如下代码, 因为是准备工作, 所以刚开始写的都是一些基础性的东西, 就不一一解释了, 直接上代码: <body> <div id="container"> <div class="box"> <div class="boximg"> <img src="img/1.jpeg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img

JS模拟瀑布流无限加载

阅读更多关于 JS模拟瀑布流无限加载

效果图：随着鼠标往下滚动，不断加载生成不同颜色大小的图片 HTML <div id= "content" > <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> CSS * { margin : 0 ; padding : 0 ; } #content { width : 1000px ; border : 1px dashed black ; margin : 0 auto ; overflow : hidden ; } #content ul { width : 240px ; padding : 5px ; float : left ; list-style-type : none ; } #content li { background-color : yellow ; font-size : 20px ; color : white ; text-align : center ; margin-bottom : 5px ; } JS //随机[m,n]之间的整数封装 function randomNumber(m, n) { return Math. floor ( Math. random ( ) * ( n - m + 1 ) + m ) ; } //随机颜色封装 function randomColor() {

一个无限加载瀑布流jquery实现

阅读更多关于一个无限加载瀑布流jquery实现

实现大概是下面的效果，写了比较详细的注释 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{padding:0;margin:0;} img{border:none;} a{text-decoration:none;color:#444;} a:hover{color:#999;} #title{width:600px;margin:20px auto;text-align:center;} @-webkit-keyframes shade{ from{opacity:1;} 15%{opacity:0.4;} to{opacity:1;} } @-moz-keyframes shade{ from{opacity:1;} 15%{opacity:0.4;} to{opacity:1;} } @-ms-keyframes shade{ from{opacity:1;} 15%{opacity:0.4;} to{opacity:1;} } @-o-keyframes shade{ from{opacity:1;} 15%{opacity:0.4;} to{opacity:1;} } @keyframes shade{

小程序瀑布流无限加载

阅读更多关于小程序瀑布流无限加载

由于想做成瀑布流，故一开始使用如下的方式： .waterfall-container { column-count: 2; column-gap: 30rpx; } 但是，由于这种 column-count:2 ，是由上往下排的，所以再加载新的一页的时候，原来在页首的会被顶到底部，导致整个逻辑是错误的。故，需要修改一下页面的实现思路 1. 在页首加入预加载的图片的不显示的块，加载图片时，会触发事件， 2. 在事件处理 function 中，进行图片的分发，根据当前的两列的实际高度，分发到两列中。具体实现：在页首加上 display: none 的块，用于预加载图片。 <view style="display:none"> <image wx:for="{{prefetch_products.rows}}" data-id="{{item.id}}" data-image-src="{{item.cover}}" wx:for-item="item" src="{{item.cover}}" bindload="onImageLoad"></image> </view> JS: onImageLoad: function (e) { var oriHeight = e.detail.height, oriWidth = e.detail.width, scale =

JS瀑布流无限加载！

阅读更多关于 JS瀑布流无限加载！

关于瀑布流的原理我就不详细说明了，在上面的文章中有，或者大家可以去看大漠老师的文章，讲的很详细，今天我们主要是动手做一个瀑布流~ 说明：本文效果是无限加载的，意思就是你一直滚动就会一直加载图片出现，而不是说，加载几张就停了，如果需要加载几张就停止的，可以去看看下面的文章原生JAVASCRIPT AJAX点击加载更多–（获取评论列表）看完这个应该就明白怎么加载额定的数目后停止，但是值得注意的就是瀑布流，如果你不是无限加载，因为图片高度不一样，图片是顶部对齐的，所以底部就会出现留白的现象，如下所示：至于底部留白美观问题，就见仁见智了！ html结构： <div id="main"> <div class="pin"> <div class="box"> <img src="./images/1.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/2.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/3.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="./images/4.jpg"/> </div>

RecyclerView瀑布流的实现方式

阅读更多关于 RecyclerView瀑布流的实现方式

public class StaggAdpter extends RecyclerView.Adapter<StaggAdpter.ViewHolder>{ private Context context; private List<String> list; private List<Integer> hiehts = new ArrayList<>(); public StaggAdpter(Context context, List<String> list) { this.context = context; this.list = list; for(int i = 0;i<list.size();i++){ hiehts.add((int) (Math.random()*400+300)); } } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { ViewHolder holder = new ViewHolder(LinearLayout.inflate(context, R.layout.list1, null)); return holder; } @Override public void onBindViewHolder

瀑布流图片加载

阅读更多关于瀑布流图片加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .imglist{width: 100%;height: auto;position: relative;} .imglist ul{padding:0px;margin:0px auto;position: relative;} .imglist ul li{width: 220px;border:1px solid #ccc;padding: 5px;float: left;list-style: none;position: absolute;} .imglist ul li img{width: 100%;vertical-align: middle;} .more{position: absolute;display: block;width: 100px;height:30px;padding: 5px 10px;background-color: #efefef;color:#333;left: 0px;right:0px;margin: 0px auto;border:none;border-radius: 4px;} </style> </head> <body> <div class="imglist">

订阅瀑布流