我在转换HTML / CSS / JS页面并在Ruby on Rails上使用它时遇到问题。我有以下JS代码：
Java脚本：
function getRandomSize(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
var allImages = "";
for (var i = 0; i < 25; i++) {
var width = getRandomSize(200, 400);
var height = getRandomSize(200, 400);
allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">';
}
$('#photos').append(allImages);
并将其转换为Coffee脚本。
咖啡：
allImages = ''
getRandomSize = (min, max) ->
Math.round Math.random() * (max - min) + min
i = 0
while i < 25
width = getRandomSize(200, 400)
height = getRandomSize(200, 400)
allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">'
i++
$('#photos').append allImages
但是，当我用HTML调用它时，它不会显示图像。我用控制台日志测试了它，它正在工作。
我在Ruby on Rails上使用它：
HTML：
<section id="photos">heyyyyyyyyyyyyy</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
CSS：
// Place all the styles related to the mood controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
body {
margin: 0;
padding: 0;
}