有个瀑布型的布局需求，于是找了下，网上大部分用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. 温故而知新 Vue 原来也有this.$forceUpdate();

    由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到),我捉摸着有没有和react一样的立即更新UI的API呢 this.forceUpdate()呢?结果还真有: this ...

  2. Redis复制与可扩展集群搭建【转】

    本文会讨论一下Redis的复制功能以及Redis复制机制本身的优缺点以及集群搭建问题. Redis复制流程概述 Redis的复制功能是完全建立在之前我们讨论过的基于内存快照的持久化策略基础上的,也就是 ...

  3. 关于ansbile工具的shell、command、script、raw模块的区别和使用场景

    command模块 [执行远程命令] [root@node1 ansible]# ansible testservers -m command -a 'uname -n' script模块 [在远程主 ...

  4. 【转】10个非常有用的网页设计工具 | Goodfav Magazine

    10+ very useful Web Designer Tools Totally free legal computer eBooks download, available in various ...

  5. Atitit it行业图像处理行业软件行业感到到迷茫的三大原因和解决方案

    Atitit it行业图像处理行业软件行业感到到迷茫的三大原因和解决方案 1. 迷茫的原因最大原因是未知1 1.1. 我在哪里??自己的定位,1 1.2. 正确方向是什么??1 1.3. 虽然找到方向 ...

  6. 关于casperjs的介绍

    casperjs是一个自动化测试框架,功能强大,也很适合当做爬虫软件使用,casperjs基于phantomjs软件,phantomjs是一个没有界面的浏览器环境,基于python环境 一,安装cas ...

  7. django rest_framework入门五-认证和权限

    1.django User实体 django自带了用户验证模块,django/contrib/auth/models.py定义了用户实体,代码如下: class AbstractUser(Abstra ...

  8. shell（7）：四则运算

    shell 四则运算:expr,let,bc,(()), 1.expr的用法: expr命令是一个手工命令行计数器,用于在UNIX/LINUX下求表达式变量的值,一般用于整数值,也可用于字符串. 详细 ...

  9. iOS应用管理(优化)

    // //  ViewController.m //  01-应用管理 //  Created by apple on 17-5-14. //  Copyright (c) 2017年  All ri ...

  10. 【Java】Java日志框架Logback的简单例子

    常用的日志框架 SLF4J,全称Simple Logging Facade for Java,即Java简单日志外观框架,顾名思义,它并非具体的日志实现,而是日志外观框架 java.util.logg ...