帮忙看看下面这个效果怎么实现？

Question

本帖最后由 qiqishardgel 于 2012-10-23 14:03:21 编辑

Answer 1

你用的是float吧，这个不行的。http://ued.taobao.com/blog/2011/09/14/waterfall/http://masonry.desandro.com/

Answer 2

我想知道 我提取的数据是用DataList显示的（上面第二张图片） 怎么把DataList和瀑布流结合起来？

Answer 3

能给个例子吗，之前一直用的是DataList,那repeaper和那个瀑布流应该怎么结合呢？

Answer 4

用Repeater，然后看我给你的文章，配合JS和CSS

Answer 5

为什么测试的时候，是几张固定的图片可以出来瀑布流的效果，但是一弄到DataList或Repeater上，就没有任何效果呢？有没有人给个数据绑定和瀑布流结合的例子看一下？

Answer 6

同意楼上的用repeater+table布局来实现！方便控制样式！

Answer 7

<style type="text/css">
ul {position:relative;font-size:12px;width:900px}
p {margin:10px 10px}
p a {text-decoration:none;color:#0088cc}
p a:hover {text-decoration:underline;}
ul li {width:200px;border-radius:5px;list-style:none;position:absolute;margin:10px;height:150px;}
li.a {height:auto}

.hide {opacity:0;filter:alpha(opacity=0)}
img{width:200px}
</style>    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>    <script id="setwaterfall">
(function ($) {
$.fn.setwaterfall = function (options) {
function findLowestIndex(Arr)
{
var index = 0;
var i;
for (i in Arr)
{
if(Arr[i]<Arr[index])
{
index = i;
}
}
return index;
}; function findBigestIndex(Arr)
{
var index = 0;
var i;
for (i in Arr)
{
if(Arr[i]>Arr[index])
{
index = i;
}
}
return index;
};    var boxwidth = $(this).width()+parseInt($(this).css("paddingLeft"))*2+parseInt($(this).css("marginLeft"))*2;
   var wrapWidth = $(this).parent().width();
   var col = Math.floor(wrapWidth/boxwidth);
           var wrappadding = (wrapWidth % boxwidth) /2;
   var row = Math.floor($(this).length/col) == $(this).length/col?$(this).length/col:(Math.floor($(this).length/col)+1);
   var colhigharry = [];
   var colpos;
   var leftpos;
   var toppos;
   for(var len = 0;len < col;len++)
   {
colhigharry.push(0);
   };
   $(this).each(function(index){
var pos = index;
var col1height = 0;
var col2height = 0;
var col3height = 0;
var col4height = 0;
if(pos<col)
{
leftpos = boxwidth*pos + wrappadding + "px";
$(this).css({"top":"0","left":leftpos});
colhigharry[index] = $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))+parseInt($(this).css("paddingBottom"));
}
else
{
   colpos = findLowestIndex(colhigharry);
   leftpos = boxwidth*colpos + wrappadding +"px";
   toppos = colhigharry[colpos]+"px";
   $(this).css({"top":toppos,"left":leftpos});
   colhigharry[colpos] =  colhigharry[colpos] + $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))+parseInt($(this).css("paddingBottom"));
}           
   });
   var wraphighindex = findBigestIndex(colhigharry);
   var wraphigh = colhigharry[wraphighindex]+"px";
   $(this).parent().height(wraphigh);           
   var selector = $(this).selector;
   window.onresize = function(){$(selector).setwaterfall();};
}
})(jQuery)
    </script>    <script>
$(document).ready(function(){

var obj = [];
obj[0]=["<li class=\"b red hide\"></li>"];
obj[1]=["<li class=\"e yellow hide\"></li>"];
obj[2]=["<li class=\"h blue hide\"></li>"];
obj[3]=["<li class=\"i green hide\"></li>"];
obj[4]=["<li class=\"j eee hide\"></li>"];
obj[5]=["<li class=\"k ccc hide\"></li>"];
$("ul li").setwaterfall();
$(window).scroll(function () {
var clienth = document.documentElement.clientHeight;
var scrollh = document.documentElement.scrollHeight;
var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
if (clienth + scrollt + 200 > scrollh) {
var html = obj.join("");
$("ul").append(html);
$(".hide").animate({opacity:1},1000);
$("ul li").setwaterfall();
}
}); });    </script>
<ul>
            <li id="a" class="a">
                <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal">
                    <ItemTemplate>
                        <table style="border-top: solid 1px #333333; border-left: solid 1px #333333; border-right: solid 1px #333333;
                            border-bottom: solid 1px #333333;">
                            <tr>
                                <td valign="top">
                                    <img src='images/<%# Eval("product_img") %>'
                                        alt="" />
                                </td>
                            </tr>
                            
                        </table>
                    </ItemTemplate>
                </asp:DataList>
            </li>
            </ul>
帮忙看看，为什么这段代码就是出不来瀑布流那种效果？

Answer 8

她美一张 图片的 区域都是一个 数据源。你用 DataList  为好，我觉得，这样可以 控制像的数量 ，当然你用 repeater 也可以，他们 唯一的 区别就是 图片大小不一样， 其他的 都是一个 模板出来的 多个相同的 项。

Answer 9

还是不行啊  你有例子吗 是和DataList结合的那种？