瀑布流

瀑布流效果 效果 源码 https://github.com/YouXianMing/Animations https://github.com/chiahsien/CHTCollectionViewWaterfallLayout // // WaterfallLayoutController.m // Animations // // Created by YouXianMing on 16/1/3. // Copyright © 2016年 YouXianMing. All rights reserved. // #import "WaterfallLayoutController.h" #import "NSData+JSONData.h" #import "GCD.h" #import "ResponseData.h" #import "CHTCollectionViewWaterfallLayout.h" #import "WaterfallCell.h" #import "WaterfallHeaderView.h" #import "WaterfallFooterView.h" static NSString *picturesSouce = @"http://www.duitang.com/album/1733789/masn/p/0/50/"; static

项目要做荣誉证书的排版，宽度是统一的，但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张，点击按钮再加载全部剩下的数据 效果图 首先是html部分，写好样式 <!-- 荣誉资质 --> <div class="about_honor"> <div class="container"> <h2> <img src="/templates/img/honor_img1.png" /> <p>展望未来，我们满怀信心。xx网络的点滴进步均来源于广大客户的不断支持。</p> </h2> <ul class="box-container" id="main-box"> <!-- 加载前15张图片 --> <?php $info=mysqli_query($con,"SELECT * FROM `wit_honor` order by `order` limit 15"); while($row=mysqli_fetch_array($info)){ ?> <li class="box wow fadeInUp" data-wow-delay=".1s"><img src="/templates/images/honor/<?php echo $row['honor_imgurl'];?>" /></li> <?php } //加载15张以后的全部图片 $info2=mysqli

先来看在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

main.xml <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/arc_hf_search_result" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:id="@+id/arc_hf_search_item" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout> </ScrollView> ArcHFSearchResult.java public class ArcHFSearchResult extends Activity { protected static final String TAG = "ArcHFSearchResult"; private ScrollView svResult; private LinearLayout

UICollectionView 瀑布流的简单实现 UICollectionView 比 tableView 灵活，功能也强大很多。系统实现了流式布局，但用处还有很多限制。 要想实现更灵活的布局，就咬重写UICollectionViewLayout。 Demo地址： WaterfallCollectionLayout 先看下实现效果： 废话不多说，直接上代码： 先看WaterfallCollectionLayout.m #import "WaterfallCollectionLayout.h" #define colMargin 5 #define colCount 4 #define rolMargin 5 @interface WaterfallCollectionLayout () //数组存放每列的总高度 @property(nonatomic,strong)NSMutableArray* colsHeight; //单元格宽度 @property(nonatomic,assign)CGFloat colWidth; @end 该类要重写以下方法： //完成布局前的初始工作 -(void)prepareLayout; //collectionView的内容尺寸 -(CGSize)collectionViewContentSize; //为每个item设置属性 -

先看效果图吧： JS代码先放上来给大家看下思路。具体实现还是需要css和html代码的，可以看我的在线源代码和效果： 全屏， chrome， 浏览最佳 http://runjs.cn/detail/j9qlhajc $(function(){ $('#brand-waterfall').waterfall(); }); // 瀑布流插件 // pannysp 2013.4.9 ;(function ($) { $.fn.waterfall = function(options) { var df = { item: '.item', margin: 15, addfooter: true }; options = $.extend(df, options); return this.each(function() { var $box = $(this), pos = [], _box_width = $box.width(), $items = $box.find(options.item), _owidth = $items.eq(0).outerWidth() + options.margin, _oheight = $items.eq(0).outerHeight() + options.margin, _num = Math.floor(_box_width/

基本流程 第一屏图片不用Ajax加载，默认写在页面上。第一屏要以最快效率打开，待JS文件下载后再Ajax请求明显要慢。 滚动到最后一行图片时开始加载图片，每次加载两行，每行4张图片（4列布局）。位置计算是关键的，可以以页面中翻页容器或页面footer为参考点，如果scrollTop大概等于翻页容器或footer的top则开始加载。这里的大概根据需求适当缩减100-300px。 加载规则 各列容器按高度从低到高排序 Ajax请求的图片数据按高度从高到低排序 拼凑HTML片段后把最高的item添加到最低的列容器中，以尽量保证拖动多次后各列高度相当，不至于某列空白太多 一些补充 加载的元素item一般采用动画淡出（fadeIn） 滚动事件scroll的hander被调用太频繁，可采用“防弹跳”技术，即设定一个时间值，比如300ms，300ms内的调用被clearTimeout掉。可避免拖动滚动条时卡。 // 防止弹跳，避免scroll时频繁调用 function debounce(fn, wait) { var timer return function() { var later = function() { timer = null fn(arguments) } clearTimeout(timer) timer = setTimeout(later, wait) } } http

说明 源代码 1. 瀑布流 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题 解决的思路: 让图片等宽、不等高 核心: 用到了定位 img { position : absolute ; left : 最小的索引 * 图片的宽度 ; top : 最小的图片的高度 ; } 算法如下: 首先获取浏览器的宽度w,用w除以图片盒子的宽度向下取整记为列数: col 利用数组,保存每一列当前的高度 如果是第一行,则将图片的高度保存在数组arr中 如果不是第一行,取出arr中的最小值和索引,计算出绝对定位的位置.并给图片设置绝对定位 1.1 用到的API 1.1.1 获取当前屏幕的宽度 由于每个图片盒子还有对应的高度,因此获取的时候,还要获取内边距. 在jquery中,可以通过 $().outerWidth 实现 var screenWidth = $ ( window ) . outerWidth ( ) 1.1.2 给DOM元素加css样式 $ ( ) . css ( { position : 'absolute' , left : currLeft , top : currTop } ) 1.1.3 总体代码 总体代码如下: $ ( function ( ) { waterFall ( ) } ) function

1.test.php代码（html js） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>瀑布流测试</title> <style type='text/css'> #wf-main{position: relative;} #wf-main li{padding: 15px 0 0 15px; float:left;} </style> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body> <ul class="tips" id="wf-main" style="list-style-type:none;"> <?php for($i=1;$i<=8;$i++) { $string = './image/test'.$i.'.jpg'; echo "<li class='wf-cld'><img src='$string' width='200' height='auto' alt='' /></li>"; } ?> </ul> </body> </html> <script> $(function(){ waterfall(); //进行加载图片 var count =

闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚（当然肯定后来会忘），因为是我实现的。下面说正题： 瀑布流的主体即为 几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。 主体形式如下： <div id="main"> 　　<ul class="pics"> 　　　　<li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　... 　　</ul> 　　<ul class="pics"> <li> <div class="pic"><img /></div> <div class="content">anytext..</div> </li> 　　　　<li><div class="pic"><img /></div> <div class="content">anytext..</div