瀑布流 | 易学教程

jquery插件实现瀑布流

阅读更多关于 jquery插件实现瀑布流

jquery插件实现瀑布流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; width:400px; } .box img { width:100%; } </style> <body> <div id="masonry" class="container-fluid"> <div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/5840871504671934.jpg"></div> <div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/6829101504671934.jpg"></div> <div class="box"><img src="http://wxserver.knowway

纯css实现瀑布流（multi-column多列及flex布局）

阅读更多关于纯css实现瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度还要结合在子容器中设置break-inside防止多列布局，分页媒体和多区域上下文中的意外中断 break-inside属性值 auto 指定既不强制也不禁止元素内的页/列中断。 avoid 指定避免元素内的分页符。 avoid-page 指定避免元素内的分页符。 avoid-column 指定避免元素内的列中断。 avoid-region 指定避免元素内的区域中断。截取了部分，可自己填充 /* html文件 */  <div id="root"> <div class="item"> <img class="itemImg" src="../images/1.jpeg" alt=""/> <div class="userInfo"> <img class="avatar" src="../images/gift.png" alt=""/> <span

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

阅读更多关于 iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView 一、简介 UICollectionView是iOS6之后引入的一个新的UI控件，它和UITableView有着诸多的相似之处，其中许多代理方法都十分类似。简单来说，UICollectionView是比UITbleView更加强大的一个UI控件，有如下几个方面： 1、支持水平和垂直两种方向的布局 2、通过layout配置方式进行布局 3、类似于TableView中的cell特性外，CollectionView中的Item大小和位置可以自由定义 4、通过layout布局回调的代理方法，可以动态的定制每个item的大小和collection的大体布局属性 5、更加强大一点，完全自定义一套layout布局方案，可以实现意想不到的效果这篇博客，我们主要讨论CollectionView使用原生layout的方法和相关属性，其他特点和更强的制定化，会在后面的博客中介绍二、先来实现一个最简单的九宫格类布局在了解UICollectionView的更多属性前，我们先来使用其进行一个最简单的流布局试试看，在controller的viewDidLoad中添加如下代码： //创建一个layout布局类 UICollectionViewFlowLayout * layout = [

自己实现vue瀑布流组件，含详细注释

阅读更多关于自己实现vue瀑布流组件，含详细注释

我知道vue有瀑布流插件vue-waterfall-easy,但是使用的时候与我的预期有部分别，所以就自己动手写了这个组件人和动物的根本区别是是否会使用工具，我们不仅要会使用，还要会创造工具,别人提供的工具不一定能满足自己的需求。先来张效果图: 使用示例: html: 　　　　< waterfall : col =" 4 " : onReachbottom =" onReachBottom "> 　　　　　　 //插槽内容，根据个人需求对数据进行渲染，数据为goods,建议使用组件，方便设置样式　　　　　　 //这里根据我自己的需求，使用自己的goodsInfo组件对数据goods进行了渲染　　　　　　< goodsInfo slot-scope =" {goods} " : goods =" goods "/> 　　　　</ waterfall > 　　 JS: 　　methods:{ 　　　　　onReachbottom(){ 　　　　　　　　//此方法用于数据请求，返回一个Promise,需要以属性方式传入组件, 　　　　　　　　//示例: 　　　　　　　　return Axios.post('http://xxx.xxx.xx:8088/getData',qs.stringify({ 　　　　　　　　　　pageSize:8, 　　　　　　　　　　page:1 　　

js图片瀑布流效果

阅读更多关于 js图片瀑布流效果

要实现图片瀑布流效果，首先得准备几张图片。 html的部分比较简单就是将图片加载到浏览器就可以了代码如下（注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pool</title> <link rel="stylesheet" type="text/css" href="style2.css"> <script src="js/app.js"></script> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="1.jpeg"> </div> </div> <div class="box"> <div class="box_img"> <img src="8.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="4.jpg"> </div> </div> <div class=

瀑布流的实现

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

现在很多网站都会使用瀑布流的一个效果，什么是瀑布流呢，用在哪些地方呢？大概就是这样的一个效果，一般用于无法保证图片大小的网站。先看下布局+css 1 .cont{margin: 0 auto;position: relative;} 2 .box{float: left;padding: 6px} 3 .imgbox{border: solid 1px black;border-radius: 6px;padding: 6px} 4 .imgbox img{width:200px;display: block;} 5 6 7 <div class="cont"> 8 <div class="box"> 9 <div class="imgbox"> 10 <img src="images/4.jpg" alt=""> 11 </div> 12 </div> 13 </div> 　　瀑布流：第一行正常浮动，从第二行开始，每个元素都定位到上一行的最小高度的元素下思路就是这样，这里的难点在于找到第一行和最小高度；将思路列出就会很清晰的知道自己要做些什么；所以还是比较推荐用面向对象去写，后续的使用会更多。可以用这些小案例来练手，增加熟练度。 1 function Waterfall(){ 2 // 1.获取元素 3 this.ocont = document.querySelector

JavaScript―瀑布流

阅读更多关于 JavaScript―瀑布流

现在网页中需要翻页的列表，好多都已经改为瀑布流了。所以这个思路还是特别重要的 HTML Css 页面因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算动态生成 <script> // 1.获取父容器的宽度获取子容器的宽度算出一列放多少个，边距 // 2.通过计算盒子的高度，布局方法 // 3.瀑布流启动 //获取父容器 let itemBox=document.getElementById('itembox') //父容器宽度 let iBoxW=itemBox.offsetWidth; // 子容器和宽度 let item=document.getElementsByClassName('item') let itemW=item[0].offsetWidth //列数 const rowNum=Math.floor(iBoxW/itemW) //间距 const distents=Math.floor((iBoxW-itemW*rowNum)/rowNum) // console.log(distents,rowNum) // 每个图片的left=列数*（图片大小+间距） //每个图片的top值为当前高度最低的top //保存每列的高度、索引就是我们放的列数,值就是top let arr=[] // 实现布局 for (let i=0;i

html瀑布流

阅读更多关于 html瀑布流

>>>model class Img(models.Model): src = models.FileField(verbose_name='路径',upload_to='static/img') class Meta: verbose_name_plural = '图片' >>>views import json def imgback(request): nid = request.GET.get('nid') #获取的是QuerySet数据类型 img_list = Img.objects.values('id','src') # 将QuerySet数据类型转换成列表 img_list = list(img_list) ret = { 'status': True, 'data': img_list, } return HttpResponse(json.dumps(ret)) >>>html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; }

瀑布流展示图片

阅读更多关于瀑布流展示图片

瀑布流用来图片展示，并且页面往下滚动自动刷新 views.py def img(request): return render(request,'img.html') def get_img(request): nid = request.GET.get('nid') img_obj = models.Images.objects.filter(id__gt=nid).values('id','src','title') img_list = list(img_obj) ret = { 'status':True, 'data':img_list } return JsonResponse(ret) img.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .m { width: 1000px; margin: 0 auto; } .item { width: 25%; display: inline-block; float: left; } .item img { width: 100%; } </style> </head> <body> <div class="m"> <div class="item"></div> <div class="item

瀑布流练习

阅读更多关于瀑布流练习

css *{margin: 0;padding: 0;} li{list-style: none;} #pbl{margin: 0 auto;width: 700px;} ul{width:200px;float: left;margin: 0 auto;margin-right: 10px;} img{width: 200px;padding-top:10px;border-bottom: 1px solid #333;} html <div id="pbl"> <ul></ul> <ul></ul> <ul></ul> </div> javascript window.onload = function(){ var oDiv = document.getElementById('pbl'); var oUl = document.getElementsByTagName('ul'); var clientHeight = document.documentElement.clientHeight;//可视高度 //找到最小高度的列 function minHeiht(oUl){ var ht = oUl[0].offsetHeight;//可以获取高度，但是高度和实际图片不一样，有问题 var index = 0; for(var i = 0;i < oUl.length;

订阅瀑布流