Question

我正在为项目使用水平滚动图片库。

最近滚动停止工作，我一直试图找出原因。最终我决定回到项目的这一部分的源头并开始工作，但我甚至无法让它运行起来。

我必须做一些简单的错误 - 任何想法？

我的代码：

HTML

<head>
<script type="text/javascript" src="./jquery-2.0.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./waterfall3.css" /> 
<script type="text/javascript" src="./waterfall.js"></script>
</head>

<body>
<div class="media">
<div class="imageContainer">
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>    
 </div>
 </div>
 </body>

JS

var imageWidth = 300;
$(".imageContainer").width($(".image").length*imageWidth);

CSS

.media
{
width: 300px; 
height: 288px; 
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}

.image
{
float: left;
height: 240px;
width: 300px;
margin: 0;
text-align:center;
border: 0px solid white;
}

.imageContainer
{
float:left;
}

Answer 1

将此js放入您的js文件

<script type="text/javascript">
  $(document).ready(function(e) {
    var imageWidth = 300;

    $(".imageContainer").width($(".image").length*imageWidth);
  });

</script>

这对我有用

http://jsfiddle.net/7SLN7/12/

参见此演示

Answer 2

在执行jQuery代码之前，您需要等待文档加载：

//Wrapping your code in the document ready handler will fix your issue
$(function() {
    var imageWidth = 300;
    $(".imageContainer").width($(".image").length*imageWidth);
});

详细了解如何使用the document ready handler

短脚本（＆lt; 50行）在jsfiddle中工作但不在浏览器中工作

2 个答案: