瀑布流

先来看在Windows系统的1080P显示器中显示的效果： 这个整合方式几乎没有现存的实例，是自己总结出来的方法，在此记录下来。 首先访问Masonry官网下载 masonry.pkgd.min.js ： http://masonry.desandro.com/ 将其整合到项目中，在页面中引入。 初始化id变量，让页面每次加载时的id都不同，避免 Ajax 加载时id重复造成难以察觉的错误。 var id = "gallerycontent" + Guid.NewGuid(); 采用HTML初始化方式进行初始化： <div id="@id" style="margin: 50px auto;" class="js-masonry" data-masonry-options='{ "isFitWidth": true, "itemSelector": ".post" }'> .... .... .... </div> 以上为外部容器代码。id属性使用前面的变量；style属性和后面的isFitWidth选项共同实现了容器自动水平方向居中功能；我没有像Masonry入门教程那样指定列宽选项，我觉得貌似对我的项目没什么用，通过css盒模型即可较好地控制图片区块的列宽和间距。 内部图片区块的伪代码： <div class="post" style="height:@(260/1.0

现在图片网与商城流行一种叫“瀑布流”的布局，我们公司也不小心得了“流行性感冒”，要搞这个。于是我就写了一个，现在再用我的框架mass重写一下，发布出来，顺便宣传一下我的框架。 瀑布流其实没什么东西，就是列布局与无限拖的结合。由于要支持IE6就没有CSS3，直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题，我管它为砖头。每添加一块砖头前，比较一下哪列最短，就往哪里塞。最后就是无限拖，太easy了。加之，我的框架对样式，事件等设置非常简单，比jQuery更方便。 下面就是源码，用到了并行加载技术，预设时加载了random,ready,css,event这几个模块，它们就会自行加载其依赖模块了。 $.require("more/random,ready,css,event",function(random){ //容器的CSS表达式，列数，每列的宽度 var Waterfall = function(expr, col, colWidth){ //构建整体轮廓 var container = this.container = $(expr); var pw = container.width();//容器的宽 var gw = (pw - col * colWidth)/(col-1);//列间距离 this.colWidth = colWidth; this

import React from 'react' import Masonry from 'masonry-layout' import InfiniteScroll from 'react-infinite-scroller' import axios from 'axios' import cs from 'classnames' import './styles.less' // columnWidth: 200, // itemSelector: '.grid-item' // 要布局的网格元素 // gutter: 10 // 网格间水平方向边距，垂直方向边距使用css的margin-bottom设置 // percentPosition: true // 使用columnWidth对应元素的百分比尺寸 // stamp: '.grid-stamp' // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方 // fitWidth: true // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示 // originLeft: true // 默认true网格左对齐，设为false变为右对齐 // originTop: true // 默认true网格对齐顶部，设为false对齐底部 // containerStyle:

import React from 'react' import Masonry from 'masonry-layout' import InfiniteScroll from 'react-infinite-scroller' import imagesLoaded from 'imagesloaded' import axios from 'axios' import cs from 'classnames' import './styles.less' const arr = [ // 'https://www.baidu.com/link?url=5v5Usz6yi2Yxtw0s7peMfok3NdV_Ws8dL4J5YFSt6vgWQX6dZ1tnXY2VofcFrLqAc_ePMqmpuQB_GfccVRL0G5fWdQlhU605ObjS2Gup46mfOdQEEXADCxRD-uwVKMbV-5gyDRsWVifAjpS6Rtk-VYmg6ELgsa56i280ibJ6I_LphZf2oO5OWg3FIy5pNik9qhzSAHeVgDcAuiMRzK3S0-2E7yPUfy8RNcTtBmkec7yA7kUBR5AFo9Bqow5MXU3OV5B1ZMHzZoUWW7Gzc9PaAal5nHCXLQcOSfIx0QyBK5B0R_Sq5wTVbsGxBO

描述： jquery仿堆糖网瀑布流图片布局，设置单排图片上下对齐图片自动上下交替滚动效果。单排图片按左右顺序上下图片自动滚动。 图片展示： 兼容浏览器： IE6+/Firefox/Google Chrome 官方链接： 无 JS下载： http://ijquery.360sites.cn/js/waterfall.js 预览： http://ijquery.360sites.cn/demo/waterfall 打包下载： http://ijquery.360sites.cn/demo/waterfall/waterfall.zip 参数说明： down: true, focus: "cur", index: 0, event: "click", mouseleavedo: false, async: false, wait: 4000, gap: 4000, anidelay: 14000, anitime: 1800, autodelay: 3000 JS引用代码： <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://ijquery.360sites.cn

oschina 中收录了类Pinterst 瀑布流的一个实现方式 http://www.oschina.net/p/android_waterfall 实现方式是ScrollView 嵌套多列LinearLayout ，通过计算当前图片与上下两屏距离来判断是否被回收或者重载。 单个瀑布流也可以从布局文件中 Infalte 出来，实现自定义。 Github 上还有另外一种 瀑布流的实现方式 https://github.com/huewu/PinterestLikeAdapterView Git clone git://github.com/huewu/PinterestLikeAdapterView.git 韩文。韩国人写的。 写的有点特别 。 我估计： 他首先将google的 android.widget 包中的 AdapterView ,AdapterListView和 ListView 源码copy下来。 对其中的某些部分进行了修改.(代码太多 还没有看完) ，最后使用 MultiColumnListView 类实现了 多列的ListView。 如果预计没错 ，单个View的显示方式和回收方式是和ListView相同的，有个pool of recycled views 。Adapter 中调用 getView（int posititon ,View converView ..

所谓瀑布流效果，简单说就是宽度相同但是高度不同的一大堆图片，分成几列，然后像水流一样向下排列，并随着用户的上下滑动自动加载更多的图片内容。 语言描述比较抽象，具体效果看下面的截图： 其实这个效果在web上应用的还蛮多的，在android上也有一些应用有用到。因为看起来参差不齐，所以比较有新鲜感，不像传统的九宫格那样千篇一律。 网络上相关的文章也有几篇，但是整理后发现要么忽略了OOM的处理，要么代码的逻辑相对来说有一点混乱，滑动效果也有一点卡顿。 所以后来自己干脆换了一下思路，重新实现了这样一个瀑布流效果。目前做的测试不多，但是加载几千张图片还没有出现过OOM的情况，滑动也比较流畅。 下面大体讲解一下实现思路。 要想比较好的实现这个效果主要有两个重点： 一是在用户滑动到底部的时候加载下一组图片内容的处理。 二是当加载图片比较多的情况下，对图片进行回收，防止OOM的处理。 对于第一点，主要是加载时机的判断以及加载内容的异步处理。这一部分其实理解起来还是比较容易，具体可以参见下面给出的源码。 对于第二点，在进行回收的时候，我们的整体思路是以用户当前看到的这一个屏幕为基准，向上两屏以及向下两屏一共有5屏的内容，超出这5屏范围的bitmap将被回收。 在向上滚动的时候，将回收超过下方两屏范围的bitmap，并重载进入上方两屏的bitmap。 在向下滚动的时候

刚访问页面只显示8张图片，滚动条拖到底部后再通过ajax更新数据 models.py，数据库类 class ImgInfo(models.Model): state_choice = ( (0,'展示'), (1,'不展示'), ) state = models.SmallIntegerField(choices=state_choice,default=0,verbose_name='是否展示') title = models.CharField(max_length=32,verbose_name='标题') message = models.CharField(max_length=48,verbose_name='简介') img = models.ImageField(upload_to='./static/img/meinv/',verbose_name='图片地址') class Meta: db_table = 'imginfo' verbose_name_plural = '图片库' def __str__(self): return self.title models.py urls.py ，路由 re_path('^img.html$', views.img), re_path('^get_img.html$', views.get_img), views

所需要的库及库工程 库: android-support-v7-recyclerview.jar :v21.x android-support-v4.jar :v21.x 库工程: android-support-v7-appcompat:v21.x android-support-v7- cardview 注意：cardView必须使用库工程，而不能使用jar包，原因是其引用了自定义属性 但是，如果必须要使用cardView而不导入工程，建议使用cardview源码，主要步骤如下 ： ①将自定义attr,color,dimens,styles拷贝至工程目录下 ②修改源码中的 import android.support.v7.cardview.R; 成当前工程的R资源 ③认真完成以上2步骤 效果预览 Activity文件 package st.app.base.rcp; import java.lang.reflect.Method; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.internal.view.menu

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .box { position: relative; margin: 0 auto; } .item { position: absolute; width: 200px; margin: 5px; border: 1px solid #ddd; transition: all 1s; } .item img { width: 100%; height: auto; } </style> <body> <div class="box"> <div class="item"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2241344963,3314667459&fm=26&gp=0.jpg" /> </div> <div class="item"><img src="https