簡短腳本（<50行）在jfiddle中工作，但不是瀏覽器

我在項目中使用了Horizontal-scrolling圖片庫。簡短腳本（<50行）在jfiddle中工作，但不是瀏覽器

最近滾動停止工作，我一直在試圖找出原因。最終，我決定回到項目的這個部分的源頭並努力工作，但我甚至無法運行它。

我必須做一些簡單的錯誤 - 任何想法？

我的代碼：

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>

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; 
}

來源

2013-11-25 Tai

你檢查控制檯，看看你錯過任何包括？也許jQuery或瀑布不在特定的文件夾？ –

可能是'DOCTYPE'聲明的問題.. 99％肯定.. –

當您請求DOM時，您應該將JS代碼包裝在DOM就緒處理程序中：'$（function（）{ $（「。imageContainer」）。 width（$（「。image」）.length * imageWidth）; –

把這個js你的JS文件

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

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

</script>

這是爲我工作

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

看到這個演示

來源

2013-11-25 10:04:54

甜。我會從那裏恢復工作。你能解釋爲什麼這是必要的嗎？ – Tai

這很重要，因爲您的js代碼將在文檔準備好後執行。否則您的代碼將在您的文檔準備好之前執行。 @EtaiDKlein –

謝謝！還有一個問題....我發現，如果我添加任何邊界到.image或更改大小，一些圖像彈出與其他div相同的行。任何解決方案？ – Tai

你需要等待文件在執行您的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

來源

2013-11-25 10:05:22 Trendy

簡短腳本（<50行）在jfiddle中工作，但不是瀏覽器

回答

相關問題