有个瀑布型的布局需求，于是找了下，网上大部分用jquery控件，界面太复杂，看起来很笨重，我需求比较简单，于是只能自己写

其实原理就是用cs 去控制，那么我们只需要把对应的界面去规划就行了，比如，我一个页面要分成2列，然后呈现为瀑布型，就是两个ul

至于动态Repeater的绑定，我暂时只能想到用两个Repeater，然后绑定的时候，按照i%2==0 把一个集合拆成2个，分别绑定到对应的Repeater

效果如下

绑定部分，我感觉还是有改进空间，时间紧促，没时间去研究，有更方法的同学，欢迎指教。

完整代码：

http://download.csdn.net/detail/jine515073/9214077

自适应瀑布型布局（手机，PC全兼容）的更多相关文章

  1. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  2. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  3. 手机PC文件传输

    QQ啥的现在直接无法全部退出,很纠结后台运行,时不时的来条消息,明明电脑QQ还开着,越来越流氓了. 服务端代码: <%@ Page Language="C#" %> & ...

  4. 自适应XAML布局经验总结 （一）原则和页面结构设计

    XAML布局回顾 Grid和StackPanel是核心布局,尤其以Grid最为重要. Grid是网格布局,XAML的设计者有可能参考了Html里的Table设计了Grid布局,但进行了改进.Html中 ...

  5. 手机pc显示不同的内容

    <script type="text/javascript"> // var txt = $('#sjyincang').html(); // alert(txt); ...

  6. 分享一款强大的图片查看器插件，手机PC 通吃，功能超级齐全！

    一款强大的图片查看器插件,手机PC 通吃,功能超级齐全! 地址:http://photoswipe.com/

  7. boostrap栅格系统自适应的布局

    1.栅格系统 ​ Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的的分界点.这些分界点主要是基于视口宽度的最小值, ...

  8. 自适应电脑、手机和iPad的网页设计方法

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. rem - 移动前端自适应适配布局解决方案和比较(转载)

    原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...

随机推荐

  1. update关联其他表批量更新数据-跨数据库-跨服务器Update时关联表条件更新

    1.有时在做项目时会有些期初数据更新,从老系统更新到新系统.如果用程序循环从老系统付给新系统. 2.有时在项目中需要同步程序,或者自动同步程序时会有大量数据更新就可能用到如下方法了. 3.为了做分析, ...

  2. SQLServer2005 CASE WHEN在项目中实例-查询显示值替换

    1.利用SqlServer中的case when来把数据查询出来的数据替换成其它值显示 2.结果对比: 普通select查询出来的结果如下: 用了case when方法后显示结果如下: 3.具体使用代 ...

  3. java字符串的遍历以及字符串中各类字符的统计

    1.需求:获取字符串中的每一个字符   分析: A:如何能够拿到每一个字符呢?  char charAt(int index) B:我怎么知道字符到底有多少个呢? int length() publi ...

  4. 两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。

    //table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll( ...

  5. [LintCode] N-Queens

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  6. React Native在开发过程中遇到的一些问题(俗称:坑)

    4900 服务器地址错误 运行时产生以下错误:Could not connect to development server. 1.URL地址设置 问题: Could not connect to d ...

  7. [100]linux常用命令参数小结

    1.mkdir 2.ls -l -d 显示目录 -F 给文件夹结尾加/标识 -a 以.开头的都是隐藏文件 -rt 按照修改时间倒序排列(最新修改的在最下) ls -lhrt #最新的在下面 3.cd ...

  8. [sql]mysql指引(整理中...)-对db的分类

    参考 db存储及分层 一个db一个文件夹. 一张表两个文件frm是存表结构的,ibd是存数据的 连接层: sock ip sql层: 存储层: 2018年4月1日 20:53:54小结: 时间太久,抓 ...

  9. HTML杂记

    1.URL  uniform resource locator 遵循格式: scheme://host.domain:port/path/filename scheme - 定义因特网服务的类型.最常 ...

  10. 菜鸟学Java（十四）——Java反射机制（一）

    说到反射,相信有过编程经验的人都不会陌生.反射机制让Java变得更加的灵活.反射机制在Java的众多特性中是非常重要的一个.下面就让我们一点一点了解它是怎么一回事. 什么是反射 在运行状态中,对于任意 ...