js 图片排列问题，按各个图片宽度加上等于容器宽度来排列

JavaScript022

js 图片排列问题，按各个图片宽度加上等于容器宽度来排列,第1张

这个玩意叫瀑布流布局，分为浮动和定位布局方式，

因为是固定高度，做法就很简单了，直接浮动布局就行了，如果宽度不够，他会自动转到下一行，

你需要用到ajax，动态加载请求，数据，

<ul id="logo_show"><li><a><img /></a><li></li></ul>

所有的图片都放在li里面，给li加浮动就行，

百度是用的定位布局。大概思路和我这一样一样的。

还是固定宽1140是不对的，现在很多1024的屏，你需要判断浏览器可视宽度，来给固定宽。

假如你有如下结构：

<div>

<img src='#' />

<img src='#' />

<img src='#' />

<img src='#' />

<img src='#' />

<img src='#' />

</div>

则，用jq可以如下实现

$(document).ready(function(){

$("div img").each(function(){

if(parseInt(Math.random()*2)==0)

$(this).prependTo($(this).parent())

})

})

这只是抛砖，你可以自己想想具体怎么去实现随即排序的问题。

document.writeln("<table width=778 border=0 align=center cellpadding=0 cellspacing=0 bgcolor=\"#FFFFFF\">")

document.writeln("<tr>")

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.writeln("</tr><tr>")

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.writeln("</tr><tr>")

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.write('<td><a href="" target=_blank><img src="files\/11.gif" width="250" height="60" border="0"></a></td>')

document.writeln("<\/tr><\/table>")