有个瀑布型的布局需求，于是找了下，网上大部分用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. Python MySQLdb 批量插入 封装

    def insert_data_many(dbName,list_data_dict): try: # 得到列表的第一个字典集合 data_dict = list_data_dict[0] # 得到( ...

  2. Java使用Rabbitmq惊喜队列queue和消息内容的本地持久化核心方法。（内容存储在硬盘）

    _Channel.queueDeclare(queue, true, false, false, null); _Channel.basicPublish(_ExchangeName, queue,M ...

  3. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  4. grub配置指南

    GRUB(统一引导装入器)是基本的Linux引导装入器.其有四个作用,如下:1.选择操作系统(如果计算机上安装了多个操作系统).2.表示相应引导文件所在的分区.3.找到内核.4.运行初始内存盘,设置内 ...

  5. [svc]jdk+tomcat部署.jforum论坛部署

    安装jdk和tomcat jdk1.7.0_13(系列)下载url 我这里用的最新的jdk. 去官网下载即可 cd /usr/local/src/ tar xf jdk-8u162-linux-x64 ...

  6. [100]find&xargs命令

    打算把基础命令常用选项做个总结. find命令参数 - 命令格式 find . -type f -name '*.txt' - 命令参数 find #查找文件 -type #指定类型 f 文件 d 目 ...

  7. 深入理解Linux内核－回收页框

    Linux 系统在为用户态进程和内核分配动态内存的时候,所作的检查是马马虎虎的对内核使用的许多磁盘高速缓存和内存高速缓存大小也同样不作限制. 页框回收算法(PFRA):1.在所有内存使用完之前,就必须 ...

  8. OpenVSwitch 硬件加速浅谈

    https://zhuanlan.zhihu.com/p/57870521 本文首发SDNLAB. 现代的虚拟化技术使得开发和部署高级网络服务变得更加简单方便.基于虚拟化的网络服务,具有多样性,低成本 ...

  9. linux命令（44）:sed，vim；去掉文件中的^M 符号，去掉行首空格和制表符

    注:下面的直接粘贴会出错,要重新输入^M 如何输入^M,先 ctrl+v,然后 ctrl+m 第一种方法: cat -A filename 就可以看到windows下的断元字符 ^M要去除他,最简单用 ...

  10. 如何在Python之Flask中使用https链接

    [Flask]在Flask中使用HTTPS 转自:http://www.jianshu.com/p/5ea147e03255